web前段开发（第四周）-CSDN博客

本文链接：https://blog.csdn.net/Gog_Fairy/article/details/127823772

一、display显示框类型

1.display：inline,block,inline-block,none
2.关于display：none和visibility：hidden的区别
display：none在删除显示框的同时，会删除其所占的位置。
visibility：hidden：清空所在的位置的图形，将其变为空白的同时，保留先前的位置。

二、标签嵌套规范

ul、li
dl、dt、dd
table、tr、td

1.块能够嵌套内联
<div>
    <span></span>
    <a href=""></a>
</div>

2.块标签不一定可以嵌套块标签
块嵌套块
<div>
    <div></div>
</div>
特殊：错误的写法
<p>
    <div></div>
</p>
3.内联不能嵌套块标签
<span>
    <div></div>
</span>
特殊：
<a href="">
    <div></div>
<!-- </a>      一般在给一个区域加链接的时候使用 -->

三、overflow溢出隐藏

overflow:
visible(默认)
hidden
scroll
auto(x轴和y轴，
用overflow-x,overfolw-y分别针对两个轴进行设置)

代码展示：

```kotlin
div{width:300px;height:200px;border:1px black solid}
        div{width:300px;height:200px;border:1px black solid;overflow: auto;}
        div{width:300px;height:200px;border:1px black solid;overflow:hidden;}
        div{width:300px;height:200px;border:1px black solid;overflow: scroll;}

效果展示：
请添加图片描述

四、position定位

1.position特性

1.css position 属性用于指定一个元素在文档中的定位。top,right,bottom,left属性则决定该元素的最终位置。
2.position取值:
static(默认）
relative
absolute
fixed
sticky
3.relative:
如果没有定位偏移量，对元素本身没有任何影响。
不使元素脱离文档
不影响其他元素的布局
left,top,right,bottom是相对于其他元素自身进行的偏移。
4.absolute，绝对定位
原始代码展示：

#box1{width:100px;height:100px;background-color: red;}
#box2{width:100px;height:100px;background-color: blue;margin-left: 100px;margin-top: 100px;}
#box3{width:100px;height:100px;background-color: yellow;}
</style>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    
</body>
</html>

效果展示：在这里插入图片描述
用position代码操作：

<style>
#box1{width:100px;height:100px;background-color: red;}
#box2{width:100px;height:100px;background-color: blue;position: relative;left:100px;top:100px;}
#box3{width:100px;height:100px;background-color: yellow;}
</style>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    
</body>

效果展示：在这里插入图片描述

五、fixed固定定位

1.用fixed固定
不受浏览器滚动条的影响
还可以用bottom:0;和right:0;来调节最终的位置

<style>
body{height:2000px;}
div{position: fixed;}
</style>
<body>
 <div>这是一个块</div>
</body>

2.sticky粘性定位：
在指定位置进行粘性操作，在特殊的场景才会用到，有吸附的功能。

div{background:red;position: sticky;top:0;}
position：sticky需要配合，top,bottom使用

<style>
body{height:2000px;}
div{background:red;position: sticky;top:0;}
</style>
<body>
<p>666666666</p>
<p>666666666</p>
<p>666666666</p>
<p>666666666</p>
<p>666666666</p>
<p>666666666</p>
<div>这是一个块</div>
<p>11111111</p>
<p>11111111</p>
<p>11111111</p>
<p>11111111</p>
<p>11111111</p>
<p>11111111</p>
</body>

效果展示：在这里插入图片描述
后写的样式优先级更高，按照从上到下的顺序
可以用z-index来调整优先级

六、定位实现下拉菜单

效果a展示：

<style>
*{margin:0;padding: 0;}
ul{list-style: none;}
#menu{width:100px;height:30px;margin:20px auto;border:1px black solid;position: relative;}
#menu ul{width:100px;border:1px black solid;position: absolute;left:-1px;top:30px;background-color: white;display: none;}
#menu:hover ul{display: block;}
#menu ul li:hover{background: gray;}
p{text-align: center;}

</style>
<body>
    <div id="menu">
        卖家中心
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            <li>列表项4</li>
        </ul>
    </div>
    <p>测试段落测试段落测试段落测试段落</p>
  
</body>

效果展示：在这里插入图片描述

七、定位实现居中和装饰点

代码展示：

<style>
    #box1{width:300px;height: 300px;border:1px black solid;position:relative}
    #box2{width:100px;height:100px;background: red;position: absolute;left:50%;top: 50%;margin:-50px 0 0 -50px}全部都是以右上角的点为基准进行偏移的
</style>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
    
</body>

效果展示：在这里插入图片描述

八、PC端企业类型整页制作

1.1

通栏：自适应浏览器的宽度
版心：固定一个宽度
前期的准备工作，
设置网页的字体颜色，图片的类型，版心，通栏的大小
预制代码：

*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
 img{display:block;}/*把图片转成块 */
 a{text-decoration: none;color: #FF646464;}/*主题色的选择 */
 h1,h2,h3{font-size: 16px;}/*统一字体的大小 */
 body{font-family:Arial;}/*统一文字的类型 */

 .l{float:left}左浮动
 .r{float:right}右浮动
.clear:after{content:"";display:black;clear:both;}
.container{width:1080px;margin:0 auto;}版心的大小
.container-fluid{width:100%;}通栏的宽度大小百分之百

#head{height: 81px;}
#head .head_logo{width: 162px;height: 44px;margin-top: 19px;}定义logo的大小
#head .head_menu{font-size: 14px;line-height: 81px;}定义菜单的大小，菜单是浮动的
#head .head_menu li{ float: left;margin-left: 58px; }

1.2 制作页面头子

  <div id="head" class="container">
        <div class="head_logo l">
            <img src="./image/logo.png"  alt="博文尚美" title="博文尚美">
        </div>
        <ul class="head_menu ">
                <li>
                    <a herf="#">HOME</a>
                </li>
                <li>
                    <a herf="#">ABOUT</a>
                </li>
                <li>
                    <a herf="#">PROTFOLIO</a>
                </li>
                <li>
                    <a herf="#">SERVICE</a>
                </li>
                <li>
                    <a herf="#">NEWS</a>
                </li>
                <li>
                    <a herf="#">CONTACT</a>
                </li>
        </ul>
    </div>
</div>

效果展示：在这里插入图片描述

1.3制作滚动条

效果展示：在这里插入图片描述
代码展示：

<style>
#banner{position: relative;}
#banner .banner_list{width: 100%;height: 469px;position: relative;}
#banner .banner_list li{width: 100%;height: 100%; 
    background: center 0 no-repeat;position: absolute;left: 0;top: 0;opacity: 0;z-index: 1;}
#banner .banner_list li.active{opacity: 1;z-index: 10;}
</style>
<body>
    <div id="head" class="container">
        <div class="head_logo l">
            <img src="./image/logo.png"  alt="博文尚美" title="博文尚美LOGO">
        </div>
        <ul class="head_menu r">
                <li>
                    <a herf="#">HOME</a>
                </li>
                <li>
                    <a herf="#">ABOUT</a>
                </li>
                <li>
                    <a herf="#">PROTFOLIO</a>
                </li>
                <li>
                    <a herf="#">SERVICE</a>
                </li>
                <li>
                    <a herf="#">NEWS</a>
                </li>
                <li>
                    <a herf="#">CONTACT</a>
                </li>
        </ul>
    </div>
    <div id="banner" class="container_fluid">
        <ul class="banner_list">
            <li class="active" style="background-image: url(./image/banner.png)">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./image/banner.png)">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./image/banner.png)">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./image/banner.png)">
                <a href="#"></a>
            </li>
        </ul>
        <ol class="banner_btn">
            <li class="active"></li> 
            <li></li> 
            <li></li> 
            <li></li>        
        </ol>
    </div>
    </body>

1.4 制作服务范围

效果展示：
在这里插入图片描述

代码展示：

<style>
#service{overflow: hidden;min-height: 407px;}
    #service .service_list{text-align: center;margin-top: 34px;}
    #service .service_list li{float: left;width: 250px;margin: 0 10px;}
    #service .service_list div{width: 102px;height: 102px;margin: 0 auto;}
    #service .service_list li:nth-last-of-type(1) div{background-image: url(../image/mini_ico.png)}
    #service .service_list li:nth-last-of-type(2) div{background-image: url(../image/mini_ico.png)}
    #service .service_list li:nth-last-of-type(3) div{background-image: url(../image/mini_ico.png)}
    #service .service_list li:nth-last-of-type(4) div{background-image: url(../image/mini_ico.png)}</style>
  </style>  
<body>
    <div id="service" class="container">
        <div class="area_title">
            <h2>服务范围</h2>
            <p>OUR SERVICE</p>
        </div>
        <ul class="service_list">
            <li>
                <div></div>
                <h3>1.WEB DESIGN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>2.WEB DESIGN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>3.WEB DESIGN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>4.WEB DESIGN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
        </ul>
    </div>
</body>
</html>
<div id="service" class="container">
        <div class="area_title">
            <h2>服务范围</h2>
            <p>OUR SERVICE</p>
        </div>
        <ul class="service_list">
            <li>
                <div></div>
                <h3>1.WEB DESIGN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>2.WEB DESIGN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>3.WEB DESIGN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>4.WEB DESIGN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
        </ul>
    </div>