网页设计代码

2020-12-28 17:29| 发布者: | 查看: |

网页设计代码:Html前端网页设计

HTML网页设计

第一天 初识HTML

标题部分 主体部分

认识HBuilder软件
快捷键

ctrl / 注释代码ctrl y 恢复撤销ctrl x 剪切ctrl z 撤销ctrl c 复制ctrl p 在当前项目查找文件ctrl f 在当前文件查找字符串ctrl alt f 在当前目录查找字符串ctrl k 格式化代码ctrl g 跳转到某行代码ctrl o 打开文件ctrl alt s 保存所有文件鼠标左键 ctrl选中多行(可进行多行修改操作)

一、内部包含的部件
1、标题标签

内容 双标签
改变文字大小 从大到小 黑体加粗
标签只许到6 7以后都是普通文字样式
2、段落、换行、注释
1 段落

内容

双标签
代表段落文字标签
2 水平线标签
可插入水平分割线
3 换行

使段落文字换行
(4)居中
内容 双标签
(5)注释
—内容—
或快捷键
3、格式元素
普通文本格式
粗体文本 东软睿道
大号字 东软睿道
大号字 东软睿道
着重文字 东软睿道
斜体字 东软睿道
小号字 东软睿道
加重语气 东软睿道
下标字 东软睿道
上标字 东软睿道
插入字 东软睿道
删除字 东软睿道
4、插入图片元素

src代表图像地址
alt代表图像的替代文字
title代表鼠标悬停时提示文字
width和height代表宽度和高度
5、列表
1 无序列表

2 有序列表 3 定义列表definition list 第二天 CSS用于网页设计中字体、位置、颜色的设置 一、CSS样式表单 1 外部引用样式 href代表文件路径 rel代表使用外部样式表 type代表文件类型 2 内部样式 css代码写在 三、CSS文本属性 1、font-family 字体样式 2、font-size 字体大小 3、font-weight 字体加粗 4、 四、无语意元素 1、无语意标签 1 内联标签 可句中单独调用 2 块级标签 五、用来设置板块 #代表id . 代表class #top 代表 .top 代表 六、背景设置 background-color 元素背景颜色 background-image 元素背景图片 引用方法 background-rapeat 设置背景图片水平或垂直平铺 background-position 设置背景图片起始位置 七、文本样式 color 设置文本颜色 line-height 设置行间距离行高 text-align 设置文本的对齐方式 八、 list-style:none; /* 列表样式,去掉前面的圈 */ margin:0px;/* 去标头空白 */

/* 鼠标悬停时效果改变 /
#aaa li:hover{
background-color: darksalmon;
font-size: 18px;
color:aqua;
}
float: left;/ 浮动操作 /可进行横向排列
float:left;/ 浮动效果,让竖着的文字浮动变为一行 */

padding-left: 40px; 代表顶出的距离

margin-top 代表距离顶部的间距

margin-right: auto; /* auto为自动调节位置 */

border-radius:10px; /* 边框圆角程度 */

#menu li:hover{
background-color: darksalmon;
color: darkorchid;
border-radius:50px ;/* 鼠标悬停时边框形状 */
}

使网页之间链接

内容简介

<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部