Web前端笔记记录（三）
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>
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;}
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{
}
成品展示
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
