day04笔记

day04笔记

### 一、css常用属性

1、text-align:left|center|right|justify; 文本水平对齐方式 justify两端对齐

2、line-height行高 行高是文本行与行之间的距离

行高使用规则：

• 当行高等于容器高度的时候可以实现文本垂直居中

• 当行高大于容器高度的时候可以实现文本垂直往下

• 当行高小于容器高度的时候可以实现文本垂直往上

3、list-style:none; 去除列表符号

4、text-decoration:none; 清除超链接的下划线

注意点：超链接的文本颜色不能继承父元素的

5、border边框

分写形式

border-width 边框宽度

border-style 边框样式（线型） solid（实线） dashed（虚线） dotted（点划线） double（双线）

border-color 边框颜色

注意点：double必须边框宽度大于或者等于3px

缩写形式

border:值1 值2 值3; 值1表示边框宽度 值2边框样式 值3边框颜色

border-left:值1 值2 值3; 值1表示边框宽度 值2边框样式 值3边框颜色

border-right:值1 值2 值3; 值1表示边框宽度 值2边框样式 值3边框颜色

border-top:值1 值2 值3; 值1表示边框宽度 值2边框样式 值3边框颜色

border-bottom:值1 值2 值3; 值1表示边框宽度 值2边框样式 值3边框颜色

border:none|0; 取消边框

6、背景属性

分写形式

background-color 背景颜色

background-image:url(); 背景图片

背景图显示规则：

当背景图小于容器大小时，背景图会默认平铺

当背景图大于容器大小时，背景图的某些区域显示不完整

当背景图等于容器大小时，背景图刚好显示下

background-repeat:repeat（平铺，默认值）|no-repeat（不平铺）|repeat-x（水平平铺）|repear-y（垂直平铺）; 平铺属性

背景位置属性的缩写

background-position:left|center|right|top|bottom|number; 背景图位置 值1表示水平位置 值2表示垂直位置

背景位置属性的分写

background-position-x 表示水平位置

background-position-y 表示垂直位置

background-attachment:scroll（默认滚动）|fixed（固定）;背景固定属性

背景属性缩写形式

background:值1 值2 值3 值4...;

取消背景

background:none;

7、margin属性

margin外边距（边界），指的是元素与元素之间的距离

分写形式:

margin-left 左边距

margin-right 右边距

margin-top 上边距

margin-bottom 下边距

缩写形式:

margin:值1; 一个表示四个方向都有

margin:值1 值2; 值1表示上下 值2表示左右

margin:值1 值2 值3; 值1表示上 值2表示左右 值3表示下

margin:值1 值2 值3 值4; 值1表示上 值2表示右 值3表示下 值4表示左

组和使用：

margin:0 auto; auto自动，自适应

8、 padding内边距

padding内边距（填充），指的是元素内容到边框之间的距离，默认会把元素给撑大

padding作用控制元素内容的位置，元素内容分为文本和标记

分写形式

padding-left 左填充

padding-right 右填充

padding-top 上填充

padding-bottom下填充

缩写形式

padding:值1; 一个表示四个方向都有

padding:值1 值2; 值1表示上下 值2表示左右

padding:值1 值2 值3; 值1表示上 值2表示左右 值3表示下

padding:值1 值2 值3 值4; 值1表示上 值2表示右 值3表示下 值4表示左

padding属性使用的注意点事项：

• 如果想要控制文本在元素里面的位置只能使用padding，如果使用了padding想要保持元素原有大小不改变，需要从元素的宽度或者高度上减去对应的padding值

• 如果元素没有设置宽度的时候情况下，使用了padding属性不需要减去

• 元素的内容是标记的情况下，想要控制元素的内容的位置，这个时候既可以使用margin也可以使用padding怎么选择呢？那种方法简单就使用那种

关于元素的默认宽度问题

• 在网页中对于独占一行，自上而下排列的元素来说，当自身没有设置宽度的时候它的宽度会默认跟随父级

二、导航案例

案例示意图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rrCfJtWT-1628151106623)(C:\Users\Mac\Desktop\H5-2109\day04\笔记\images\1.png)]

结构代码

<!--
	导航案例分析
    
    + 结构搭建，在工作中使用无序列表比较多 ul li
    
    + 由于导航可以点击跳转到其他的页面，所以要使用超链接标记 a
    
    + 由于ul和li标记有默认的内外边距，所以先清除边距
    
    + margin:0 auto; 可以让元素在页面中水平居中
    
    + margin外边距，指的是元素与元素之间的距离
    
    分写形式
    
    margin-left
    
    margin-right
    
    margin-top
    
    margin-bottom
    
    缩写形式
    
    margin:值1; 一个表示四个方向都有
    
    margin:值1 值2; 值1表示上下  值2表示左右
    
    margin:值1 值2 值3; 值1表示上 值2表示左右 值3表示下
    
    margin:值1 值2 值3 值4; 上 右 下 左 
    
    
    + padding内边距（填充），指的是元素内容到边框之间的距离，默认会把元素给撑大
    
    分写形式
    
    padding-left
    
    padding-right
    
    padding-top
    
    padding-bottom
    
    缩写形式
    
    padding:值1; 一个表示四个方向都有
    
    padding:值1 值2; 值1表示上下  值2表示左右
    
    padding:值1 值2 值3; 值1表示上 值2表示左右 值3表示下
    
    padding:值1 值2 值3 值4; 上 右 下 左 
    
    + list-style:none; 去除列表符号
    
    + float:left|right|none; 浮动属性 可以让自上而下排列的元素横向排列
-->
<ul class="nav">
	<li class="first"><a href="#">首页</a></li>
    <li><a href="#">国内</a></li>
    <li><a href="#">国际</a></li>
    <li><a href="#">财经</a></li>
    <li><a href="#">军事</a></li>
    <li><a href="#">娱乐</a></li>
    <li><a href="#">体育</a></li>
    <li><a href="#">互联网</a></li>
    <li><a href="#">科技</a></li>
    <li><a href="#">游戏</a></li>
    <li><a href="#">女人</a></li>
    <li><a href="#">汽车</a></li>
    <li><a href="#">房产</a></li>
</ul>

样式代码

<style>
	*{margin:0;padding:0;}
	.nav{
		width:1000px;
		height:40px;
		background-color:#01204f;
		/*margin-top:50px;*/
		margin:50px auto;
		}
	/*包含选择器的权重是包含选择器之和 权重10 + 1*/
	.nav li{
		list-style:none;
		float:left;
		line-height:40px;
		font-size:14px;
		padding:0 10px;
		}
	.nav li a{
		text-decoration:none;
		color:white;
		}
	/*权重10 + 10，高权重覆盖了低权重*/
	.nav .first{
		padding-left:30px;
		background-color:#cc0000;
		background-image:url(images/cd.png);
		background-repeat:no-repeat;
		background-position:8px 8px;
		}
</style>

三、网站开发

1、需要新建一个站点，把文件夹标准化和规范化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hpgv4rvG-1628151106631)(C:\Users\Mac\Desktop\H5-2109\day04\笔记\images\2.png)]

2、开发过程中代码量较多，需要推荐结构和样式分开来写，样式代码引入外部的css文件。css命名跟随html文件命名，css文件引入遵循相对路径的三种规则，css命名不要出现中文

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZFShFRdV-1628151106634)(C:\Users\Mac\Desktop\H5-2109\day04\笔记\images\3.png)]

3、由于网页中会使用大量的标记取搭建网页结构，而这些标记中会存在很多咱们不需要默认样式，所以需要第一步设置重置样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pn1u5dpt-1628151106639)(C:\Users\Mac\Desktop\H5-2109\day04\笔记\images\4.png)]

4、分析设计稿，使用PS获取设计稿的尺寸和相关的信息。使用的PS常规的那些操作，使用矩形选框工具、吸管工具吸取颜色值、使用矩形选框工具量取尺寸大小、截图（选中目标区域、ctrl+C、ctrl+N、ctrl+v、另存为web所用格式）

5、网页中会存在大量的代码片段，为了后期好维护和别人能看得懂你的代码，需要结构和样式都要写对应的注释。由于是刚开始编写代码，建议大家先写外层结构，再写样式，完了填写内容结构，再写内容结构样式。网页截图的时候尽量截取小一些，因为网页加载的时候图越大耗费的时间越久，也会浪费网络带宽资源

6、input标记默认存在的样式

input标记默认有2px的边框，取消边框border:none|0;

input标记是横向排列的，在代码结构中手动换行后，标记与标记之间会存在间隙问题，使用float属性

input标记还默认带有蓝色的轮廓，取消默认的轮廓 ouline:none;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AUg6h0hr-1628151106644)(C:\Users\Mac\Desktop\H5-2109\day04\笔记\images\5.png)]

写对应的注释。由于是刚开始编写代码，建议大家先写外层结构，再写样式，完了填写内容结构，再写内容结构样式。网页截图的时候尽量截取小一些，因为网页加载的时候图越大耗费的时间越久，也会浪费网络带宽资源

6、input标记默认存在的样式

input标记默认有2px的边框，取消边框border:none|0;

input标记是横向排列的，在代码结构中手动换行后，标记与标记之间会存在间隙问题，使用float属性

input标记还默认带有蓝色的轮廓，取消默认的轮廓 ouline:none;

[外链图片转存中…(img-AUg6h0hr-1628151106644)]

7、浏览器默认字体大小是16px，默认支持的最小字体大小是12px，如果小于12px以12px显示