Web前端笔记记录（三）

  • position定位
    • relative相对定位
    • absolute绝对定位
      • 脱离文档流
      • 使内联支持宽高
      • 使块元素默认宽根据内容决定（让块具备内联的特性）
      • 如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对，相对，固定）
    • fixed固定定位
    • sticky粘性定位
    • z-index定位层级
      • 实现下拉菜单
  • css添加省略号
  • css sprite
  • css圆角
  • 离谱的练习
    • 博文尚美
      • html
      • CSS
      • 成品展示
    • qq飞车官网
      • html
      • CSS
      • 成品展示

84-109

position定位

position特性
css position 属性用于指定一个元素在文档中的定位方式。top，right，bottom，left属性则决定了该元素的最终位置

position（取值）
static（默认）
relative
absolute
fixed
sticky

relative相对定位

relative相对定位
1、如果没有定位偏移量，对元素本身没有任何影响
2、不使元素脱离文档流
3、不影响其他元素布局
4、left，top，right，bottom是相对于当前元素自身进行偏移的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><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>
</head>
<body><div id="box1"></div><div id="box2"></div><div id="box3"></div>
</body>
</html>

成品展示

absolute绝对定位

absolute绝对定位
1、使元素完全脱离文档流
2、使内联元素支持宽高（使内联具备块特性）
3、使块元素默认宽根据内容决定（让块具备内联的特性）
4、如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对，相对，固定）

脱离文档流

脱离文档流,指的是元素脱离正常元素的布局排版规则,其他处于文档流中的盒子在计算布局排版时,会自动无视已脱离文档流的元素来进行定位。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box1{width: 100px;height: 100px;background-color: red;position: absolute;}#box2{width: 200px;height: 200px;background-color: blue;}/* #box3{width: 100px;height: 100px;background-color: yellow;} */</style>
</head>
<body><div id="box1"></div><div id="box2"></div></body>
</html>

使内联支持宽高

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>![请添加图片描述](https://img-blog.csdnimg.cn/6a8d5cfc1e994fe294c8c62168040dfb.png)span{width: 100px;height: 100px;background-color: red;position: absolute;}</style>
</head>
<body><!-- <div id="box1"></div><div id="box2"></div> --><span>这是一个块</span>
</body>
</html>

span标签前后加position：absolute；的对比

使块元素默认宽根据内容决定（让块具备内联的特性）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{background-color: red;position: absolute;}</style>
</head>
<body><div>这是一个块</div>
</body>
</html>

如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对，相对，固定）

没有祖先元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box1{width: 100px;height: 100px;border: 1px black solid;margin: 200px;}#box2{width: 200px;height: 200px;background-color: red;position: absolute;right: 0;bottom: 0;} </style>
</head>
<body><div id="box1"><div id="box2"></div></div>
</body>
</html>

有祖先元素

#box1{width: 100px;height: 100px;border: 1px black solid;margin: 200px;position: relative;}![请添加图片描述](https://img-blog.csdnimg.cn/06f945e7a75849af8855368751ce88ee.png)

fixed固定定位

fixed固定定位
1、使元素完全脱离文档流
2、使内联元素支持宽高（让内联具备块特性）
3、使块元素默认宽根据内容决定（让块具备内联的特性）
4、相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

sticky粘性定位

ticky粘性定位
在指定位置，进行粘性操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{height: 2000px;}div{background-color: red;position: sticky;top: 0;}</style>
</head>
<body><div id="box1">这是一个块</div>
</body>
</html>

固定在网页上端的一个div标签（我不会展示）

z-index定位层级

z-index定位层级
默认层级为0
嵌套的时候的层级问题
（默认后写的层级高）
（寻找相同层级的比较，如果相同层级有嵌套，嵌套里面层级再高也没用，比较的不是他）

正常情况下（不加层级）

加了第一个div层级高于第二个div的层级

实现下拉菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}ul{list-style: none;}#menu{width: 100px;height: 30px;margin: 20px;border: 1px black solid;position: relative;left: 600px;}#menu ul{width: 100px;height: 100px black solid;position: absolute;left: -1px;top: 30px;background: white;display: none;}#menu:hover ul{display: block;}#menu ul li:hover{background: gray;}p{text-align: center;}</style>
</head>
<body><div id="menu">卖家中心<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li></ul></div><p>测试段落测试段落测试段落测试段落测试段落测试段落测试段落</p>
</body>
</html>

成品展示

css添加省略号

css添加省略号
1、width
必须有一个固定的宽（长度过长自动折行）
2、white-space：nowrap
不让内容折行
3、overflow：hidden
隐藏溢出的内容
4、text-overflow：ellipsis
添加省略号

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#content{width: 200px;border: black solid;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style>
</head>
<body><div id="content">测试文字测试文字测试文字测试文字测试文字测试文字测试文字</div>
</body>
</html>

成品展示

css sprite

css sprite
特性

css雪碧也叫作css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载

好处：

可以减少图片的质量，网页的图片加载速度快
减少图片的请求的次数，加快网页的打开

css圆角

css圆角
border-radius：给标签添加圆角

给border-radius设置俩个值的时候分别代表左上右下和右上左下两个的相切圆半径

给border-radius设置成四个值时，代表的是左上、右上、右下、左下，顺时针赋值

给border-radius设置成“x/y”时，x是横向距离，y是纵向距离，是个椭圆

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box{width: 200px;height: 200px;background: red;border-radius: 20px;}</style>
</head>
<body><div id="box"></div>
</body>
</html>

成品展示

也可以做成一个圆，border-radius的值设成50%就可以适应div块的大小变成圆

离谱的练习

博文尚美

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博文尚美</title><link rel="stylesheet" href="../css/样式.css"></head>
<body><!-- head --><div id="head" class="container"><div class="logo l"><a href="#"><img src="../img/logo.png" alt="博文尚美"></a></div><ul class="menu"><li><a href="#">HOME</a></li><li><a href="#">ABOUT</a></li><li><a href="#">PROTFOLIO</a></li><li><a href="#">SERVICE</a></li><li><a href="#">NEWS</a></li><li><a href="#">CONTACT</a></li></ul></div><!-- book --><div id="book"><ul class="list"><li style="background-image: url(../img/书.png);"><a href="#"></a></li></ul><ol class="btn"><li class="lix"></li><li></li><li></li><li></li></ol></div><!-- 服务范围 --><div id="fuwu" class="wrapper"><div id="heng" ><h2>服务范围</h2><p>OUR SERVICES</p></div><div id="tu1"><img src="../img/电脑.png" alt=""><h2>1.WEB DESIGN</h2><ul><li class="li2">企业品牌网站设计/手机网站制作</li><li class="li3">动画网站创意设计</li></ul></div><div id="tu2"><img src="../img/圆圈图片.png" alt=""><h2>2.GRAPHIC DESIGN</h2><ul><li class="li2">标志LOGO设计/产品宣传册设计</li><li class="li3">企业广告/海报设计</li></ul></div><div id="tu3"><img src="../img/购物车.png" alt=""><h2>3.E-BUSINESS PLAN</h2><ul><li class="li2">淘宝/天猫装修设计及运营推广</li><li class="li3">企业微博、微信营销</li></ul></div><div id="tu4"><img src="../img/信件.png" alt=""><h2>4.MALBOXAGENTS</h2><ul><li class="li2">腾讯/网易企业邮箱品牌代理</li><li class="li3">个性化邮箱定制开发</li></ul></div></div><!-- 客户案例 --><div id="anli" class="wrapper"><div id="heng"><h2><span>{ 客户案例 }</span></h2><p>With the best prolessional technology, to design the best innovative web site</p></div><div id="kehu"><ul><li><a href="#"><img src="../img/戴墨镜.png" alt=""></a></li><li><a href="#"><img src="../img/椅子落日.png" alt=""></a></li><li><a href="#"><img src="../img/蓝绿.png" alt=""></a></li></ul></div><button><span>VIEW MORE</span></button></div><!-- 最新咨询 --><div id="zixun" class="container"><div id="heng" class="xia"><h2>最新咨询</h2><p>TEH LATEST NEWS</p></div><div id="zixuntu"><img src="../img/白色.png" alt=""></div><div id="jan"><div class="yue"><h2>09</h2><p>Jan</p></div><div class="text"><h2>网站排名进入前三的技巧</h2><p>很多客户经常纳闷为什么自己的网站老是优化不到搜索引擎首页，更不用说进首页前三了。那么优化1111111111111111111111111111111111111111111111111111111111111111</p></div></div><div id="jan"><div class="yue"><h2>08</h2><p>Jan</p></div><div class="text"><h2>网站排名进入前三的技巧</h2><p>很多客户经常纳闷为什么自己的网站老是优化不到搜索引擎首页，更不用说进首页前三了。那么优化1111111111111111111111111111111111111111111111111111111111111111</p></div></div><div id="jan"><div class="yue"><h2>07</h2><p>Jan</p></div><div class="text"><h2>网站排名进入前三的技巧</h2><p>很多客户经常纳闷为什么自己的网站老是优化不到搜索引擎首页，更不用说进首页前三了。那么优化1111111111111111111111111111111111111111111111111111111111111111</p></div></div><div id="jan"><div class="yue"><h2>06</h2><p>Jan</p></div><div class="text"><h2>网站排名进入前三的技巧</h2><p>很多客户经常纳闷为什么自己的网站老是优化不到搜索引擎首页，更不用说进首页前三了。那么优化1111111111111111111111111111111111111111111111111111111111111111</p></div></div></div><!-- 底部 --><div id="bottom" class="wrapper"><div id="nei" class="container"><p>aaaaaaaaaaaaaaaaaaaaaaaaa</p><ul><li><a href="#" class="wu">Home</a></li><li><a href="#">Home</a></li><li><a href="#">Home</a></li><li><a href="#">Home</a></li></ul></div></div></body>
</html>

CSS

*{margin: 0;padding: 0;box-sizing: border-box;
}ol,ul,li{list-style: none;
}img{display: block;}a{text-decoration: none;
}body{font-family: Arial;
}.clear:before,.clear:after{content: " ";display: block;clear: both;
}
.l{float: left;}
.r{float: right;}/* 版心 */.container{width: 1080px;margin: 0 auto;position: relative;}.wrapper{width: 1352px;margin: 0 auto;}/* 通栏 */.fluid{width: 100%;
}/* head */
#head{height: 82px;line-height: 82px;
}#head .logo{margin-top: 19px;
}#head .menu{float: right;font-size: 17px;
}#head .menu li{float: right;margin-left: 50px;
}#head .menu li a{color: #646464;
}/* book */
#book{position: relative;}#book .list{position: relative;width: 100%;height: 469px;
}#book .list li {position: absolute;left: 0;top: 0;height: 100%;width: 100%;background:center 0 no-repeat;
}#book .btn{width: 100%;position: absolute;bottom: 19px;text-align: center;
}#book .btn li{display: inline-block;margin-right: 11px;width: 12px;height: 12px;border: 3px solid white;border-radius: 50%;cursor: pointer;
}#book .btn .lix{background-color: aliceblue;
}/* 服务范围 */
#fuwu{overflow: hidden;/* 不加这个会出现下面 #heng 的 margin-top 传递 */height: 408px;/* width: 1352px; *//* background-color: pink; */
}#heng{margin-top: 60px;text-align: center;/* background-color: pink; */
}#heng h2{height: 20px;line-height: 20px;font-size: 20px;font-weight: normal;color: #363636;background: url(../img/两横.png) no-repeat center 5px;
}#heng p{font-size: 14px;margin-top: 10px;color: #9f9f9f;
}/* 四张服务范围图片 */
/* (背景的装饰，即可能长期不变的图片使用background-img) */
/* (用于展示的图片，即短期可能发生变动的图片用img) */
#fuwu #tu1{ float: left;width: 210px;height: 210px;/* background-color: pink; */margin-top: 40px;margin-right: 70px;margin-left: 151px;text-align: center;
}
#fuwu #tu1 img{margin: 0 auto;
}
#fuwu #tu1 h2{margin-top: 20px;font-size: 18px;font-weight: bold;line-height: 36px;
}
#fuwu #tu1 .li2{margin-top: 10px;font-size: 14px;color: #6d6d6d;line-height: 22px;
}
#fuwu #tu1 .li3{font-size: 14px;color: #6d6d6d;line-height: 22px;
}#fuwu #tu2{ float: left;width: 210px;height: 210px;/* background-color: pink; */margin-right: 70px;margin-top: 40px;text-align: center;
}
#fuwu #tu2 img{margin: 0 auto;
}
#fuwu #tu2 h2{margin-top: 20px;font-size: 18px;font-weight: bold;line-height: 36px;
}
#fuwu #tu2 .li2{margin-top: 10px;font-size: 14px;color: #6d6d6d;line-height: 22px;
}
#fuwu #tu2 .li3{font-size: 14px;color: #6d6d6d;line-height: 22px;
}#fuwu #tu3{ float: left;width: 210px;height: 210px;/* background-color: pink; */margin-right: 70px;margin-top: 40px;text-align: center;
}
#fuwu #tu3 img{margin: 0 auto;
}
#fuwu #tu3 h2{margin-top: 20px;font-size: 18px;font-weight: bold;line-height: 36px;
}
#fuwu #tu3 .li2{margin-top: 10px;font-size: 14px;color: #6d6d6d;line-height: 22px;
}
#fuwu #tu3 .li3{font-size: 14px;color: #6d6d6d;line-height: 22px;
}#fuwu #tu4{ float: left;width: 210px;height: 210px;/* background-color: pink; */margin-top: 40px;text-align: center;
}
#fuwu #tu4 img{margin: 0 auto;
}
#fuwu #tu4 h2{margin-top: 20px;font-size: 18px;font-weight: bold;line-height: 36px;
}
#fuwu #tu4 .li2{margin-top: 10px;font-size: 14px;color: #6d6d6d;line-height: 22px;
}
#fuwu #tu4 .li3{font-size: 14px;color: #6d6d6d;line-height: 22px;
}/* 客户案例 */
#anli{position: relative;overflow: hidden;height: 460px;background: rgb(245, 243, 243);background-color: #f8f8f8;
}#anli #heng h2 span{color: #66c5b4;
}#anli #kehu ul{float: left;margin-top: 38px;margin-left: 167px;
}#anli #kehu li{float: left;margin-right: 20px;
}#anli button{position: absolute;bottom: 50px;left: 590px;width: 176px;height: 37px;border:3px solid #66c5b4;border-radius: 40px;background-color: #66c5b4;cursor: pointer;
}#anli button span{color: white;font-size: 14px;
}/* 最新咨询 */
#zixun{overflow: hidden;height: 450px;/* background-color: pink; */
}#zixun .xia{margin-bottom: 65px;
}#zixun #zixuntu{float: left;}#zixun #jan{float: left;margin-left: 10px;margin-bottom: 16px;width: 400px;height: 90px;/* background-color: #363636; */
}
#zixun #jan .yue{float: left;width: 65px;height: 100%;border-right:2px solid rgb(233, 227, 227) ;/* background-color: green; */}
#zixun #jan .yue h2{text-align: center;line-height: 60px;font-size: 39px;font-weight: bold;color: #66c5b4;
}
#zixun #jan .yue p{text-align: center;font-size: 18px;line-height: 30px;color:#9f9f9f;
}
#zixun #jan .text{float: left;margin-left: 20px;/* background-color: red; */
}
#zixun #jan .text h2{font-size: 18px;
}
#zixun #jan .text p{margin-top: 20px;width: 300px;height: 40px;font-size: 14px;color: #9f9f9f;/* white-space: nowrap; */overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
}/* 底部 */
#bottom{height: 50px;/* line-height: 50px; */background-color: #5FBAB5;
}#bottom #nei{height: 50px;line-height: 50px;
}#bottom #nei p{float: left;font-size: 14px;color: white;
}#bottom #nei ul{float: right;
}#bottom #nei ul li{float: right;text-align: center;
}#bottom #nei ul li a{border-right:1px solid white ;padding: 0 20px;font-size: 10px;color: white;
}
#bottom #nei ul li .wu{border: 0;
}

成品展示


qq飞车官网

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/官网.css"><style>#main{background: url(./img/背景.jpg) no-repeat center 0;min-height: 0px;}</style>
</head>
<body><!-- 腾讯游戏顶部通用 --><div id="txtongyong" class="wrapper"><a href="#"><img src="./img/腾讯游戏.png" alt="" class="txtu1 l"></a><a href="#" ><img src="./img/风起云巅.png" alt="" class="txtu2 l"></a><a href="#" ><img src="./img/成长守护平台.png" alt="" class="txtu3 l"></a></div><!-- 大背景 --><div id="main"><!-- 顶部导航 --><div id="nav"><div id="xiugai" class="wrapper"><div id="nav_logo" class="l"></div><ul class="l xiugai2"><li id="nav_logo_li" class="l"><a href="#"><h2>游戏资料</h2><p>GAME DATA</p></a></li></ul><ul class="l"><li id="nav_logo_li" class="l"><a href="#"><h2>赛事中心</h2><p>RACE</p></a></li></ul><ul class="l"><li id="nav_logo_li" class="l"><a href="#"><h2>活动中心</h2><p>EVETN</p></a></li></ul><ul class="l"><li id="nav_logo_li" class="l"><a href="#"><h2>商城专区</h2><p>ITEM SHOP</p></a></li></ul><ul class="l"><li id="nav_logo_li" class="l"><a href="#"><h2>视频直播</h2><p>VIDEO</p></a></li></ul><ul class="l"><li id="nav_logo_li" class="l"><h2>玩家互动</h2><p>HCOMMUNION</p></li></ul><ul class="l"><li id="nav_logo_li" class="l"><h2>客服中心</h2><p>SERVICE</p></li></ul></div><!-- 导航下的文字 --><!-- 游戏资料 --><div id="xiugai3" class="wrapper"><dl class="nav_zl"><dt></dt><dd><a href="#">新手指引</a></dd><dd><a href="#">官方漫画</a></dd><dd><a href="#" class="aqq">高清壁纸</a></dd><dd><a href="#">游戏下载</a></dd><dd><a href="#" class="awx">飞车手游</a></dd></dl><!-- 赛事中心 --><dl  class="nav_ss"><dt></dt><dd><a href="#">谁是车王</a></dd><dd><a href="#" class="awx">SSC</a></dd><dd><a href="#" class="aqq">全国公开赛</a></dd></dl><!-- 活动中心 --><dl  class="nav_hd"><dt></dt><dd><a href="#" class="aqq">版本专区</a></dd><dd><a href="#" class="awx">活动专区</a></dd><dd><a href="#">CDK兑换</a></dd></dl><!-- 商城专区 --><dl  class="nav_sc"><dt></dt><dd><a href="#" class="aqq">紫钻专区</a></dd><dd><a href="#">道聚城</a></dd><dd><a href="#" class="awx">点卷充值</a></dd></dl><!-- 视频直播 --><dl  class="nav_sp"><dt></dt><dd><a href="#">教学视频</a></dd><dd><a href="#" class="aqq">视频中心</a></dd></dl><!-- 玩家互动 --><dl  class="nav_wj"><dt></dt><dd><a href="#">官方论坛</a></dd><dd><a href="#">掌上飞车</a></dd><dd><a href="#" class="awx">官方微信</a></dd><dd><a href="#">官方微博</a></dd></dl><!-- 客服中心 --><dl  class="nav_kf"><dt></dt><dd><a href="#">在线客服</a></dd><dd><a href="#" class="awx">信用星级</a></dd><dd><a href="#">封号查询</a></dd><dd><a href="#">密码找回</a></dd><dd><a href="#" class="awx">家长监控</a></dd><dd><a href="#">防沉迷</a></dd><dd><a href="#">安全中心</a></dd><dd><a href="#">点亮皇族</a></dd></dl></div><!-- 查看详情 --><div id="ckxq" class="wrapper"><a href="#"></a></div></div><!-- 下部分 --><div id="xz" class="wrapper"><div id="hsxz" class="l"><a href="#"><img src="./img/下载（黄色按钮）.png" alt=""></a></div><p class="p1"><a href="#">下载游戏</a></p><div id="lsxz"><a href="#"><img src="./img/下载（蓝色）.png" alt=""></a></div><p class="p2"><a href="#">补丁下载</a></p><div id="zsxz"><a href="#"><img src="./img/紫钻（紫色）.png" alt=""></a></div><p class="p3"><a href="#">紫钻专区</a></p><!-- 登录区域 --><div id="dlu" ><div class="bj"><!-- 用户头像 --><div class="yuan l"><!-- <img src="./img/用户.png" alt="" width="76px" height="76px"> --></div><!-- 文字区域 --><div class="text l"><ul id="dlu_ul" class="l"><li class="ul_hy l">欢迎登录</li><li class="l san"><h3>魅力值</h3><p>0</p></li><li class="l san"><h3>荣誉值</h3><p>0</p></li><li class="l san"><h3>点卷</h3><p>0</p></li></ul></div> </div><!-- 服务选项 --><div class="batu"><div class="a1 l"><a href="#"></a></div><p class="p1">开通紫钻</p><div class="a2 l"><a href="#"></a></div><p class="p2">视频专区</p><div class="a3 l"><a href="#"></a></div><p class="p3">官方论坛</p><div class="a4 l"><a href="#"></a></div><p class="p4">在线客服</p><div class="a5 l"><a href="#"></a></div><p class="p5">开通紫钻</p><div class="a6 l"><a href="#"></a></div><p class="p6">视频专区</p><div class="a7 l"><a href="#"></a></div><p class="p7">官方论坛</p><div class="a8 l"><a href="#"></a></div><p class="p8">在线客服</p></div><!-- 两张二维码 --><div class="ewm"><ul><li class="tu1 l"><a href="#"><img src="./img/二维码.png" alt=""></a></li><li class="text1 l"><p>掌飞全面升级</p><h2>扫码下载</h2></li><li class="tu2 l"><a href="#"><img src="./img/二维码.png" alt=""></a></li><li class="text2 l"><p>公众号送豪利</p><h2>扫码关注</h2></li></ul></div></div><!-- 右边部分 --><div id="right" class="r"><div class="top l"><ul class="l ul1"><li class="l li1"><span>活动</span></li><li class="l li2" style="margin-left:22px;"><a href="#">正在进行</a></li><li class="l li2"><a href="#">免费福利</a></li><li class="l li2"><a href="#">商城特惠</a></li><li class="l li2"><a href="#">长期活动</a></li><li class="r li3"><a href="#"><span class="r">更多 +</span></a></li></ul><div class="situ r"><a href="#" class="az"><img src="./img/正在进行1.jpg" alt=""></a><a href="#" class="ay"><img src="./img/正在进行2.jpg" alt=""></a><a href="#" class="az"><img src="./img/正在进行3.jpg" alt=""></a><a href="#" class="ay"><img src="./img/正在进行4.jpg" alt=""></a></div></div></div></div></div>
</body>
</html>

CSS

*{margin: 0;padding: 0;box-sizing: border-box;
}ol,ul{list-style: none;
}img{display: block;}a{text-decoration: none;
}body{font-family: Arial;
}.clear:before,.clear:after{content: " ";display: block;clear: both;
}.l{float: left;
}
.r{float: right;
}.wrapper{   width: 1500px;margin: 0 auto;
}/* 腾讯顶部通栏 */
#txtongyong{overflow: hidden;height: 50px;
}#txtongyong a .txtu1{margin-left: 250px;
}
#txtongyong a .txtu2{margin-left: 30px;
}
#txtongyong a .txtu3{margin-left: 320px;margin-top: 14px;
}/* 顶部导航 */#main #nav{position: relative;width: 100%;min-height: 340px;/* padding-left:310px ; */background: url(../img/nav.png) repeat-x;overflow: hidden;
}#main #nav #nav_logo{margin-top: 13px;width: 102px;height: 75px;background: url(../img/logo.png);
}#main #nav .xiugai2{margin-left:35px ;
}#main #nav #nav_logo_li{margin-top: 32px;margin-left: 90px;
}
#main #nav #nav_logo_li h2{font-size: 20px;color: white;font-weight: 0;font-family: '宋体';
}
#main #nav #nav_logo_li p{font-size: 8px;width: 80px;text-align: center;color: #839481;
}/* 导航下的文字 */#main #nav #xiugai3{position: relative;
}#main #nav dl{position: absolute;width: 84px;
}
#main #nav dl a{position: relative;color: #f1ece3;
}
#main #nav dl a:hover{text-decoration: underline;color: rgb(255, 64, 0);
}
#main #nav dl .aqq:after{position: absolute;right: -18px;top: -2px;content: "";display: block;width: 16px;height: 16px;background: url(../img/雪碧图.png) no-repeat -282px -73px;
}
#main #nav dd .awx:after{position: absolute;right: -18px;top: -2px;content: "";display: block;width: 16px;height: 16px;background: url(../img/雪碧图.png) no-repeat -261px -73px;
}
#main #nav dt{height: 90px;
}
#main #nav dd{line-height: 30px;text-align: center;font-size: 14px;
}
#main #nav .nav_zl{left: 222px;
}
#main #nav .nav_ss{left: 400px;
}
#main #nav .nav_hd{left: 575px;
}
#main #nav .nav_sc{left: 750px;
}
#main #nav .nav_sp{left: 929px;
}
#main #nav .nav_wj{left: 1105px;
}
#main #nav .nav_kf{left: 1280px;
}/* 查看详情 */#ckxq{height: 160px;/* background-color: pink; */margin-top: 364px;
}#ckxq a{display: block;width: 100%;height: 100%;
}/* 下载区 */
/* #main2{overflow: hidden;
} */
#xz{overflow: hidden;min-height: 500px;/* background-color: pink; */position: relative;
}#xz #hsxz{margin-bottom: 10px;
}
#xz .p1{position: absolute;left: 50px;top: 40px;font-size: 50px;font-weight: bold;
}
#xz .p1 a{color: #8d5112;
}#xz #lsxz img{display: block;position: absolute;left: 316px;
}
#xz .p2{position: absolute;left: 333px;top: 28px;font-size: 18px;font-weight: bold;letter-spacing: 1px;
}
#xz .p2 a{color: white;
}#xz #zsxz img{display: block;position: absolute;left: 316px;top: 80px;
}
#xz .p3{position: absolute;left: 333px;top: 105px;font-size: 18px;font-weight: bold;letter-spacing: 1px;
}
#xz .p3 a{color: white;
}/* 登录区域 */
#xz #dlu{margin-top: 160px;width: 431px;min-height: 391px;}#xz #dlu .bj{overflow: hidden;width: 431px;height: 127px;background: url(../img/登录背景框框.png) no-repeat;
}#xz #dlu .bj .yuan{margin-top: 22px;margin-left: 30px;width: 76px;height: 76px;border-radius: 50px;/* background: url(../img/用户.png); */background-color: white;
}#xz #dlu .text #dlu_ul{text-align: center;
}#xz #dlu .text .ul_hy{color: rgb(18, 177, 177);font-size: 20px;margin-left: 12px;line-height: 127px;
}#xz #dlu .text .san{margin-left: 24px;margin-top: 22px;line-height: 40px;color: #839481;font-weight: 0;font-size: 15px;
}#xz #dlu .batu{position: relative;overflow: hidden;width: 431px;height: 163px;/* background-color: pink; */
}#xz #dlu .batu a{display: block;width: 100%;height: 100%;text-indent: -9999px;overflow: hidden;
}#xz #dlu .batu .a1{margin-top: 25px;margin-left: 64px;width: 34px;height: 24px;background:url(../img/1.png) no-repeat -18px -3px ;
}
#xz #dlu .batu .a2{margin-top: 25px;margin-left: 64px;width: 26px;height: 21px;background:url(../img/2.png) no-repeat -19px -5px ;
}
#xz #dlu .batu .a3{margin-top: 25px;margin-left: 64px;width: 26px;height: 24px;background:url(../img/3.png) no-repeat -20px -3px ;
}
#xz #dlu .batu .a4{margin-top: 25px;margin-left: 64px;width: 25px;height: 25px;background:url(../img/4.png) no-repeat -20px -3px ;
}
#xz #dlu .batu .a5{margin-top: 50px;margin-left: 64px;width: 34px;height: 24px;background:url(../img/1.png) no-repeat -18px -3px ;
}
#xz #dlu .batu .a6{margin-top: 50px;margin-left: 64px;width: 26px;height: 21px;background:url(../img/2.png) no-repeat -19px -5px ;
}
#xz #dlu .batu .a7{margin-top: 50px;margin-left: 64px;width: 26px;height: 24px;background:url(../img/3.png) no-repeat -20px -3px ;
}
#xz #dlu .batu .a8{margin-top: 50px;margin-left: 64px;width: 25px;height: 25px;background:url(../img/4.png) no-repeat -20px -3px ;
}#xz #dlu .batu .p1{position: absolute;left: 52px;top: 60px;width: 60px;line-height: 20px;font-size: 14px;
}
#xz #dlu .batu .p2{position: absolute;left: 150px;top: 60px;width: 60px;line-height: 20px;font-size: 14px;
}
#xz #dlu .batu .p3{position: absolute;left: 239px;top: 60px;width: 60px;line-height: 20px;font-size: 14px;
}
#xz #dlu .batu .p4{position: absolute;left: 328px;top: 60px;width: 60px;line-height: 20px;font-size: 14px;
}
#xz #dlu .batu .p5{position: absolute;left: 52px;top: 135px;width: 60px;line-height: 20px;font-size: 14px;
}
#xz #dlu .batu .p6{position: absolute;left: 150px;top: 135px;width: 60px;line-height: 20px;font-size: 14px;
}
#xz #dlu .batu .p7{position: absolute;left: 239px;top: 135px;width: 60px;line-height: 20px;font-size: 14px;
}
#xz #dlu .batu .p8{position: absolute;left: 328px;top: 135px;width: 60px;line-height: 20px;font-size: 14px;
}#xz #dlu .ewm{width: 431px;height: 130px;background-color: #e8eff2;
}#xz #dlu .ewm .tu1{margin-top: 23px;margin-left:10px;
}
#xz #dlu .ewm .text1{margin-top: 40px;margin-left: 10px;
}
#xz #dlu .ewm .text1 p{font-size: 16px;color: #3a94dd;
}
#xz #dlu .ewm .text1 h2{font-size: 24px;color: #9da7c5;
}
#xz #dlu .ewm .tu2{margin-top: 23px;margin-left:12px;
}
#xz #dlu .ewm .text2{margin-top: 40px;margin-left: 10px;
}
#xz #dlu .ewm .text2 p{font-size: 16px;color: #3a94dd;
}
#xz #dlu .ewm .text2 h2{font-size: 24px;color: #9da7c5;
}/* 右边区域 */
#xz #right{position: absolute;right: 0;top: 0;width: 1050px;height: 581px;/* background-color: pink; */overflow: hidden;
}#xz #right .ul1{width: 1050px;margin-bottom: 10px;
}#xz #right .li1{margin-left: 30px;height: 55px;border-left:3px solid #e98e1f ;font-size: 30px;line-height: 55px;
}
#xz #right .li1 span{margin-left: 10px;
}#xz #right .li2{width: 148px;height: 55px;font-size: 20px;/* margin-left: 50px; */line-height: 55px;text-align: center;border-bottom:2px solid  #3a94dd;
}
#xz #right .li2 a:hover{color: #3a94dd;font-weight: bold;}
#xz #right .li2 a{color: gray;
}#xz #right .li3{width: 328px;height: 55px;font: 16px;line-height: 55px;margin-right: 5px;border-bottom:2px solid  #3a94dd;
}
#xz #right .li3 span{color: gray;
}#xz #right .situ a{float: left;display: block;margin-bottom: 10px;
}
#xz #right .situ .az{margin-left: 135px;
}
#xz #right .situ .ay{margin-left: 15px;
}
#xz #right .situ a img{}

成品展示

Web前端笔记（三）相关推荐

  1. 构建高性能WEB站点笔记三

    构建高性能WEB站点笔记三 第10章 分布式缓存 10.1数据库的前端缓存区 文件系统内核缓冲区,位于物理内存的内核地址空间,除了使用O_DIRECT标记打开的文件以外,所有对磁盘文件的读写操作都要经 ...

  2. Web前端 笔记 （21-45）

    Web前端 笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例 未加语义化标签 添加语义化标签 23.表格属性 1.常见表格属 ...

  3. Web前端第三阶段--DOM

    Web前端第三阶段–DOM 文章目录 Web前端第三阶段--DOM DOM树 初识DOM DOM作用 固定元素的读取 标签读取元素 CSS选择器读取元素 class操作 classList 简单实例 ...

  4. 蛋花花简单讲解一下Web前端的三要素

    蛋花花简单讲解一下Web前端的三要素,据蛋花花了解目前Web前端就业前景十分广阔,吸引了行里行外无数的小伙伴入坑求学.蛋花花就来给大家简单的解析Web前端三要素,蛋花花觉得无论是小白上路还是技术进阶都 ...

  5. web前端大三实训网页设计：餐饮网站设计——烧烤美食山庄(7个页面) HTML+CSS+JavaScript

    web前端大三实训网页设计:餐饮网站设计--烧烤美食山庄(7个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...

  6. Web前端笔记（1）

    1. web前端三大核心技术: HTML: 结构 CSS: 样式 JavaScript: 行为 HTML基本结构与属性: html超文本标记语言,标准通用标记下的一个应用,是网页制作的必备的编程语言. ...

  7. Web前端笔记(标签)

    目录 Web前端知识点 HTML 标签的语法 html标签 主体框架 常用标签 标题标签 段落标签 字体倾斜.加粗.下划线 强调内容 预设标签 字体标签 分割线 实体字符 图片标签 视频标签 音频标签 ...

  8. WEB前端笔记第一天

    什么是WEB前端? 简单来说就是网页,只是这个网页它是由多种技术参与制作的,用来向用户展示的页面. HTML(hyperText mark-up language):它决定了网页的结构. CSS:网页 ...

  9. MOOC Web前端笔记（三）：CSS样式

    CSS样式 CSS概述 CSS--Cascading Style Shees层叠样式表 HTML定义网页的内容,CSS定义内容的样式. 内容和样式相互分离,便于修改样式. CSS语法 p为选择器 p{ ...

最新文章

  1. View.setSystemUiVisibility(int) 方法使用
  2. Oracle中若何间接运转OS敕令(下)
  3. hibernate配置
  4. 5 个常用的软件质量指标
  5. 区块链技术公司谈找到合适的激励机制
  6. C#OOP之一面向对象简介
  7. （46）HTML网页开发流程
  8. Windows下Redis安装的那些事儿！
  9. [置顶] 任务一 基本的数据库连接——以类为单位的编程思想
  10. 《JSP实用教程(第2版)/耿祥义》错误之tomcat虚拟服务目录
  11. 英语学术论文写作概述
  12. 第13章WEB13-JSP模式JDBC高级篇
  13. 计算机开机后黑屏一闪一闪怎么办,Win7开机后黑屏左上角光标闪烁的解决方法...
  14. php从一个字符串中过滤掉英文,php过滤只保留中文，英文以及数字的方法
  15. 大文件中返回频数最高的100个词
  16. STM32F103的AD采样非线性问题
  17. i3 1215U 和 i5 1235U选哪个好
  18. 1123求cos（x）的值1108一组整数求平均
  19. 关于解决SpringBoot中使用redirect重定向后，页面跳转后ulr地址后面出现jsessionid=xxxxxxx的问题
  20. 可行性研究报告——学生成绩查询系统

热门文章

  1. Lake Shore—325 型低温温度控制器
  2. 电子烟的故事里，Aspire配角也难当
  3. MBD开发模式下的XIL仿真测试
  4. 微信小程序实现非swiper组件的自定义伪3D轮播图
  5. 在Chrome浏览器中如何将网页保存为单个文件mhtml？
  6. PLAXIS Monopile Designer CONNECT Edition V21 Update 1
  7. 用GPT写的CSDN付费专栏被订阅——感谢ChatGPT带来的第一桶金
  8. web响应式布局与BootStrap框架
  9. 微信群机器人微云助手微小云如何设置群内积分兑换
  10. 基于算力网络的大数据计算资源智能调度分配方法