第五章通用配置以及导航

Girasoless

已于 2022-10-22 19:18:07 修改

阅读量349

点赞数 1

文章标签：前端 html5 css

于 2022-10-18 16:28:06 首次发布

本文链接：https://blog.csdn.net/Girasoles/article/details/127386950

版权

一、当我们编写HTML时会遇见统一消除的样式，大概有一下几个方面：

1、设置所有标签的内外边距

*{ margin: 0px; padding: 0px; }

2、获取页面所有li标签，取消标签自带的小圆点

li{ list-style: none; }

3、获取页面所有的a标签，取消其下划线

a{ text-decoration: none; }

4、获取页面所有图片，取消IE浏览器给自己添加的自动边框

img{ border: none; }

5、获取页面body标签，设置页面默认字体以及字体大小

body{ font-size: 14px; font-family: "微软雅黑"; }

6、设置所有标签的内外边距

*{ margin: 0px; padding: 0px; }

7、获取页面中所有的输入框、文本域、下拉列表，取消外带的输入框

input,textarea,select{ outline: none; }

8、版心居中：

.center{ width: 1200px; margin: 0 auto; }

二、元素类型

1、我们可以对标签进行元素分类，可以分为三种，分别是

（1）行内元素：a b em i span strong等

特点是：横向排列，没有宽高

（2）块元素：div p ul li ol li dl dt dd h1-h6等

特点是：纵向排列，可以设置宽高

（3）行内块元素：img input等

特点：横向排列，可以设置宽高

2、了解到元素分类之后，我们想要进行元素转换，可以进行一下操作：

元素类型之间的转换 display
个数	属性	说明
1	display：block；	把元素转换成块
2	display：inline；	把元素转换成行内
3	display：inline-block；	把元素转换成行内块
4	display：none；	隐藏
5	display：list-item	li标签默认的display属性值
display的属性值有18个属性值，甚至更多，display：table-header-group/table-footer-group/flex inline-flex/table/table-cell/table-caption.......

注意：我们常用的就是行内转换成块元素，行内块元素不常用；

延伸：当我们遇到三个图片的时候，已经放在了一个盒子，但是同时给magin-left的时候，第一个发生浮动，但是不想要有边距的时候，我们可以在css中写：

父级子级:first-child { magin:0px;}

三、导航案例总结

1、我们一般会分为头部top和banner区，所以可以分为两部分

注意，当我们整个图片为背景图的时候，可以在banner里面分为上下两部分即可

2、所有的导航建议都使用无序列表；

3、当我们写banner的时候宽度应该设置为100%，高度测量之后决定的。其中对于图片的设置我们应该设置为100% 100%以及不平铺；

                .banner{

                        width: 100%;

                        height: 752px;

                        background: url(../img/banner-coffer.png) no-repeat center center/100% 100%;

}

4、我们写ul li a 的时候里面存放的样式如下：

ul{

整个导航的width、height、float、magin

}

ul li{

这里只放置浮动

}

ul li a{

这里需要提前转换成块，对字体大小、字体颜色、单个a的宽高、magin、是否居中、文字对齐方式

}

ul li a:hover{

background: url(../img/logo2_06.png) no-repeat left center;

}

需要注意的是，当我们设置li a的时候，若第一个无magin左右间距的时候，我们需要去除第一个的边距/第一个宽度大小，可以使用

ul li:first-child a{

margin-left: 0px;

width:58px;

}

3、当我们设置图片上圆点鼠标点击划过的效果时，可以使用div或者是无序列表，比如说设置三个圆点：

优先对ul起一个class名字，设置位置以及宽度和高度

.yuan{
    width: 174px;
    height: 21px;
    margin: 616px auto 0px;
}

第二步：对li标签设置单个圆的大小以及是否有无边框

.yuan li{
    width: 11px;
    height: 11px;
    float: left;
    margin-left: 28px;
    border-radius: 50%;
    border: 3px solid #ffff;
}

第三步：对第一个无左边距的，取消左边距

.yuan li:first-child{
    margin-left: 0px;
}

第四步：设置滑动效果

.yuan li:hover{
    background-color: red;
}

4、当我们导航带有input的时候，我们注意需要把jinput自带的边框、背景取消、以及是否有外边框的大小和颜色：