PC端网页制作

news/2024/10/30 13:26:32/

PC端网页制作

  • 一、relative相对定位
  • 二、absolute绝对定位
  • 三、fixed和sticky及zlndex
  • 四、定位实现下拉菜单
  • 五、定位实现居中和装饰点
  • 六、css添加省略号
  • 七、css精灵及好处
  • 八、css圆角设置
  • 九、PC端企业类型整页制作
    • 1.PC端企业类型整页制作(1)
    • 2.PC端企业类型整页制作(2)
    • 3.PC端企业类型整页制作(3)
    • 4.PC端企业类型整页制作(4)
    • 5.PC端企业类型整页制作(5)
    • 6.PC端企业类型整页制作(6)
    • 7.PC端企业类型整页制作(7)
    • 8.PC端企业类型整页制作(8)
  • 十、PC端游戏类型整页制作
    • 1.PC端游戏类型整页制作(1)
    • 2.PC端游戏类型整页制作(2)
    • 3.PC端游戏类型整页制作(3)
    • 4.PC端游戏类型整页制作(4)
    • 5.PC端游戏类型整页制作(5、6、7)
    • 6.PC端游戏类型整页制作(8)
    • 7.PC端游戏类型整页制作(9)
    • 8.PC端游戏类型整页制作(10)
    • 十一、博文尚美首页
    • 十二、QQ飞车首页

一、relative相对定位

position定位
1.position特性
css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。
2.position取值
static(默认)、relative、absolute、fixed、sticky
relative相对定位
1.如果没有定位偏移量,对元素本身没有任何影响
2.不使元素脱离文档流
3.不影响其他元素布局
4.left、top、right、bottom是相对于当前元素自身进行的偏移的

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

二、absolute绝对定位

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

<style>/* #box1{ width: 100px; height: 100px; background: red; position: absolute;}#box2{ width: 200px; height: 200px; background: blue;} *//* span{ width: 100px; height: 100px; background: red; position: absolute;} div{ background: red; position: absolute; left: 100px; top: 100px;} */#box1{ width: 300px; height: 300px; border: 1px black solid; margin: 200px; position: relative;}#box2{ width: 100px; height: 100px; background: red; position: absolute; right: 0; bottom: 0;}</style> 
</head>
<body><!-- <div id="box1"></div><div id="box2"></div> --><!-- <span>这是一个内联的</span> --><!-- <div>这是一个块</div> --><div id="box1"><div id="box2"></div></div>
</body>

三、fixed和sticky及zlndex

fixed固定定位
1.使元素完全脱离文档流
2.使内联元素支持宽高(让内联具备块特性)
3.使块元素默认宽根据内容决定(让块具备内联的特性)
4.相对整个浏览器窗口进行偏移,不受浏览器滚动条的影响
sticky黏性定位
在指定的位置,进行黏性操作。
z-index定位层级
默认层级为0
嵌套时候的层级问题

<style>/* body{ height: 200px;}div{ position: fixed; bottom: 0; right: 0;} *//* body{ height: 200px;}#box1{ width: 300px; height: 300px; border: 1px black solid; margin: 200px; position: relative;}#box2{ width: 100px; height: 100px; background: red; position: fixed; left: 0; top: 0;} *//* body{ height: 2000px;}div{ background: red; position: sticky; top: 100px;} *//* #box1{ width: 100px; height: 100px; background: red; position: absolute; z-index: 1;}#box2{ width: 100px; height: 100px; background: blue; position: absolute;left: 50px; top: 50px; z-index: -1;} */#parent{ width: 100px; height: 100px; border: 1px black solid; position: absolute; z-index: -2;}#box1{ width: 100px; height: 100px; background: red; position: absolute; z-index: 1;}#box2{ width: 100px; height: 100px; background: blue; position: absolute;left: 50px; top: 50px; z-index: -1;}</style>
</head>
<body><!-- <div>这是一个块</div> --><!-- <div id="box1"><div id="box2"></div></div> --><!-- <p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><div>这是一个块</div><p>bbbbbb</p><p>bbbbbb</p><p>bbbbbb</p><p>bbbbbb</p><p>bbbbbb</p><p>bbbbbb</p> --><!-- <div id="box1"></div><div id="box2"></div> --><div id="parent"><div id="box1"></div></div><div id="box2"></div>
</body>

四、定位实现下拉菜单

<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: 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>列表项</li><li>列表项</li><li>列表项</li><li>列表项</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>
</head>
<body><div id="box1"><div id="box2"></div></div>
</body>

六、css添加省略号

width
必须有一个固定的宽
white-space: nowrap
不让内容折行
overflow : hidden
隐藏溢出的内容
text-overflow : ellipsis
添加省略号

 <style>#content{ width: 200px; border: 1px black solid; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}</style>
</head>
<body><div id="content">测试文字测试文字测试文字测试文字测试文字</div>
</body>

七、css精灵及好处

CSS Sprite
特性
CSS雪碧也叫做CSS精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及的所有零星图片都包含到一张大图中去加载。
好处
可以减少图片的质量,网页的图片加载速度快
减少图片的请求的次数,加快网页的打开

<style>#box1{ width: 20px; height: 21px; background: url(./images/tianqi_1.png) no-repeat left -596px;}#box2{ width: 300px; height: 50px; border: 1px black solid; line-height: 50px; padding-left: 30px;background: url(./images/tianqi_2.jpg) no-repeat right -536px;}</style>
</head>
<body><div id="box1"></div><div id="box2">产品中心</div>
</body>

八、css圆角设置

border-radius
给标签添加圆角

<style>/* #box{ width: 200px; height: 200px; background: red; border-radius: 100px;} *//* #box{ width: 300px; height: 300px; background: red; border-radius: 50%;} *//* #box{ width: 300px; height: 300px; background: red; border-radius: 10px 20px 30px 40px;} *//* #box{ width: 300px; height: 300px; background: red; border-radius: 20px / 40px;}  */#box{ width: 300px; height: 150px; background: red; border-radius: 150px 150px 0 0;}</style>
</head>
<body><div id="box"></div>
</body>

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

1.PC端企业类型整页制作(1)

通栏 : 自适应浏览器的宽度
版心 : 固定一个宽度,并且让容器居中
common.css(博文尚美首页)

*{ margin: 0; padding: 0;}
ul,ol{ list-style: none;}
img{ display: block;}
a{ text-decoration: none; color: #FF646464;}
h1,h2,h3{ font-size: 16px;}
border{ font-family: Arial;}.l{ float: left;}
.r{ float: right;}
.clear:after{ content: ""; display: block; clear: both;}
.container{ width: 1080px; margin: 0 auto; position: relative;}
.container-fluid{ width: 100%;}

2.PC端企业类型整页制作(2)

common.css

#head{ height: 81px;}
#head .head_logo{ width: 162px; height: 44px; margin-top: 19px;}
#head .head_menu{ font-size: 14px;}
#head .head_menu li{ float: left; margin-left: 58px;}
 <link rel="stylesheet" href="./css/common.css">
</head>
<body><div id="head" class="container"><div class="head-logo l"><a href="#"><img src="./images/logo.png" alt="博文尚美" title="博文尚美"></a></div><ul class="head_menu r"><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>
</body>

3.PC端企业类型整页制作(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;}#banner .banner_list a{ display: block; width: 100%; height: 100%;}#banner .banner_btn{ width: 100%; position: absolute; bottom: 19px; z-index: 20; font-size: 0;text-align: center;}#banner .banner_btn li{ display: inline-block; width: 12px; height: 12px; border: 2px solid white; border-radius: 50%; box-sizing: border-box;  margin: 0 6px; cursor: pointer;}#banner .banner_btn li.active{ background: white;}</style>
</head>
<body><div id="head" class="container"><div class="head-logo l"><a href="#"><img src="./images/logo.png" alt="博文尚美" title="博文尚美"></a></div><ul class="head_menu r"><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><div id="banner" class="container-fluid"><ul class="banner_list"><li class="active" style="background-image:url(./images/banner.png) ;"><a href="#"></a></li><li style="background-image:url(./images/banner.png) ;"><a href="#"></a></li><li style="background-image:url(./images/banner.png) ;"><a href="#"></a></li></ul><ol class="banner_btn"><li class="active"></li><li></li><li></li><li></li></ol></div>
</body>

4.PC端企业类型整页制作(4)

common.css.area_title{ margin-top: 60px; text-align: center;}
.area_title h2{ height: 20px; line-height: 20px; font-size: 20px; color: #363636; background: 
url(../images/title_bg.png) no-repeat center 7px; }
.area_title p{ color: #9F9F9F; font-size: 14px; line-height: 34px;}
 #service{ overflow: hidden; min-height: 407px;}
<div id="service" class="container"><div class="area_title"><h2>服务范围</h2><p>OUR DERVICES</p></div></div>

5.PC端企业类型整页制作(5)

#service .service_list{ text-align: center;}#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-of-type(1) div{ background-image: url(./images/web1.png);}#service .service_list li:nth-of-type(2) div{ background-image: url(./images/mail1.png);}#service .service_list li:nth-of-type(3) div{ background-image: url(./images/graphic1.png);}#service .service_list li:nth-of-type(4) div{ background-image: url(./images/e-bussiness1.png);}#service .service_list h3{ font-size: 18px; color: #434343; line-height: 36px; margin-top: 25px;}#service .service_list p{ font-size: 14px; color: #6D6D6D; line-height: 22px;}
<div id="service" class="container"><div class="area_title"><h2>服务范围</h2><p>OUR DERVICES</p></div><ul class="service_list"><li><div></div><h3>1.WEB DESIGN</h3><p>企业品牌网站设计/手机网站制作<br>动画网站创意设计</p></li><li><div></div><h3>2.GRAPHIC DESIGN</h3><p>标志logo设计/产品宣传册设计<br>企业广告/海报设计</p></li><li><div></div><h3>3.E-BUSINESS PLAN</h3><p>淘宝/天猫装修设计及运营推广<br>企业微博、微信营销</p></li><li><div></div><h3>4.MAILBOXAGENTS</h3><p>腾讯/网易企业邮箱品牌代理<br>个性化邮箱定制开发</p></li></ul></div>

6.PC端企业类型整页制作(6)

#case{ background: #f8f8f8;}#case .container{ min-height: 460px; overflow: hidden;}#case .area_title{ margin-top: 55px;}#case .area_title h2{ color: #66C5B4;}#case .case_list{ margin-top: 28px;}#case .case_list li{ float: left; width: 340px; margin: 0 10px;}#case .case_btn{ width: 176px; height: 37px; background: #66C5B4; margin: 0 auto; border-radius: 25px;line-height: 37px; text-align: center; color: white; font-size: 14px; margin-top: 36px;}#case .case_btn a{ display: block; width: 100%; height: 100%; color: white;}
<div id="case" class="container-fluid"><div class="container"><div class="area_title"><h2>{ 客户案例 }</h2><p>With the best professional technology, to design the best innovative website</p></div><ul class="case_list clear"><li><a href="#"><img src="./images/20141121095216750.png" alt=""></a></li><li><a href="#"><img src="./images/20141121095528549.png" alt=""></a></li><li><a href="#"><img src="./images/20141121105856226.png" alt=""></a></li></ul><div class="case_btn"><a href="#">VIEW MORE</a></div></div></div>

7.PC端企业类型整页制作(7)

#news{ min-height: 450px; overflow: hidden;}#news .area_title{ margin-top: 65px;}#news dl{ margin-top: 48px;}#news dt{ width: 234px;}#news dd{ width: 846px;}#news .news_list{ width: 100%;}#news .news_list li{ width: 50%; float: left; margin-bottom: 48px;}#news .news_date{ width: 71px; height: 70px; border-right: 1px solid #DCDCDC; text-align: center;}#news .news_date i{  color: #66C5B4; font-size: 39px; display: block; font-weight: bold;}#news .news_date span{ color: #999999; font-size: 20px; line-height: 36px;}#news .news_test{ width: 310px; margin-left: 20px;}#news .news_test h3{ font-size: 14px;}#news .news_test h3 a{ color: #3F3F3F;}#news .news_test p{ color: #A4A4A4; font-size: 12px; line-height: 21px; margin-top: 17px;}
<div id="news" class="container"><div class="area_title"><h2>最新资讯</h2><p>TEH LATEST NEWS</p></div><dl><dt class="l"><img src="./images/xs1.png" alt=""></dt><dd class="l"><ul class="news_list"><li><div class="news_date l"><i>09</i><span>Jan</span></div><div class="news_test l"><h3><a href="#">网站排名进入前三的技巧说明</a></h3><p>很多客户都会纳闷为什么自己的网站老是优化不到搜素引擎首页,更不用说进首页前三了。那么网站优化···</p></div></li><li><div class="news_date l"><i>08</i><span>Jan</span></div><div class="news_test l"><h3><a href="#">flash网站制作的优缺点</a></h3><p>虽然HTML5程序语言出现,大有逐渐代替Flash网站的趋势,但是过于生硬的HTML5动画效果,始终···</p></div></li><li><div class="news_date l"><i>07</i><span>Jan</span></div><div class="news_test l"><h3><a href="#">做个网站多少钱?</a></h3><p>"做个网站多少钱?"很多客户打电话过来直接第一句就抛出来的问题。这好比买辆车多少钱,你是要···</p></div></li><li><div class="news_date l"><i>06</i><span>Jan</span></div><div class="news_test l"><h3><a href="#">哪些网站优化手法属于网站过度优化</a></h3><p>大部分人都想让自己的网站,一夜之间出现在搜索引擎并且独占鳌头。但是事实告诉我们罗马不是一···</p></div></li></ul></dd></dl></div>

8.PC端企业类型整页制作(8)

#foot{ background: #66c5b4;}#foot .container{ height: 54px; line-height: 54px; font-size: 12px; color: white;}#foot div a{ color: white; margin: 0 10px;}
<div id="foot" class="container_fluid"><div class="container"><p class="l">Copyright 2006-2014 Bowenshangmei Culture All Rights Resered</p><div class="r"><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Portfolio</a> | <a href="#">Contact</a> </div></div></div>

十、PC端游戏类型整页制作

1.PC端游戏类型整页制作(1)

common.css
*{ margin: 0; padding: 0;}
ul,ol{ list-style: none;}
img{ display: block;}
a{ text-decoration: none; color: #464646;}
h1,h2,h3{ font-size: 16px;}
body{ font-family: Arial '宋体';}.l{ float: left;}
.r{ float: right;}
.clear:after{ content: ""; display: block; clear: both;}
.container{ width: 980px; margin: 0 auto; position: relative;}
.container-fluid{ width: 100%;}

2.PC端游戏类型整页制作(2)

#head{ background: url(../images/head_bg.png) repeat-x;}
#head .container{ height: 41px;}
#head .head_logo{ width: 220px; height: 41px; background: url(../images/ost-bg.png) no-repeat 0 -38px;}
#head .head_logo a{ display: block; width: 100%; height: 100%; text-indent: -9999px; overflow: hidden;}
#head .head_ad{ margin-left: 8px;}
#head .head_menu{ font-size: 12px;}
#head .head_menu div{ height: 18px; margin-top: 13px; background: url(../images/ost.png) no-repeat;}
#head .head_menu .head_menu_czah{ margin-right: 26px; padding-left: 20px; background-position: left -92px;}
#head .head_menu .head_menu_top{ padding-left: 17px; background-position: right -85px;}
<div id="head" class="container-fluid"><div class="container"><div class="head_logo l"><a href="#">腾讯游戏</a></div><div class="head_ad l"><a href="#"><img src="./images/ad.jpg" alt=""></a></div><div class="head_menu l"><div class="head_menu_czsh l"><a href="#">成长守护平台</a></div><div class="head_menu_top l"><a href="#">腾讯游戏排行榜</a></div></div></div></div>

3.PC端游戏类型整页制作(3)

#main{ background: url(./images/mbg1216.jpg) no-repeat center 0;}#nav{ min-height: 236px; background:url(./images/nav_down_re.png) repeat-x, url(./images/nav.png) no-repeat center 0;overflow: hidden;}#nav .nav_logo{ width: 138px; height: 112px; margin: 15px auto;}
<div id="main" class="container-fluid"><div id="nav" class="container-fluid"><div class="nav_logo"><a href="#"><img src="./images/inside_logo.png" alt="QQ飞车" title="QQ飞车"></a></div></div><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>

4.PC端游戏类型整页制作(4)

#nav dl{ position: absolute; top: 0;}#nav dt{ height: 66px;}#nav dt a{ width: 100%; height: 100%; display: block; text-indent: -999px; overflow: hidden;}#nav dd{ line-height: 27px; font-size: 12px; text-align: center;}#nav dd a{ color: white; position: relative;}#nav dd a:hover{ color: red; text-decoration: underline;}#nav dd a.hot:after{ content: ""; display: block; width: 12px; height: 12px; background: url(./images/nav_tips.png) no-repeat 0 -12px; position: absolute; right: -15px; top: 0;}#nav dd a.new:after{ content: ""; display: block; width: 12px; height: 12px; background: url(./images/nav_tips.png) no-repeat 0 0; position: absolute; right: -15px; top: 0;}#nav .nav_index{ width: 65px; left: 0;}#nav .nav_zl{ width: 69px; left: 98px;}#nav .nav_ss{ width: 74px; left: 203px;}#nav .nav_hd{ width: 68px; left: 325px;}
<div id="nav" class="container-fluid"><div class="container"><div class="nav_logo"><a href="#"><img src="./images/inside_logo.png" alt="QQ飞车" title="QQ飞车"></a></div><dl class="nav_index"><dt><a href="#">首页</a></dt></dl><dl class="nav_zl"><dt></dt><dd><a href="#">新手指引</a></dd><dd><a class="hot" href="#">官方漫画</a></dd><dd><a class="new" href="#">飞车手游</a></dd><dd><a href="#">精美壁纸</a></dd><dd><a href="#">游戏下载</a></dd></dl><dl class="nav_ss"><dt></dt><dd><a class="hot" href="#">SSC</a></dd><dd><a href="#">谁是车王</a></dd><dd><a href="#">全民争霸赛</a></dd></dl><dl class="nav_hd"><dt></dt><dd><a class="hot" href="#">版本中心</a></dd><dd><a href="#">合作专区</a></dd><dd><a href="#">CDK兑奖</a></dd></dl></div></div>

5.PC端游戏类型整页制作(5、6、7)

 #banner{ height: 276px; background: url(./images/top.png) no-repeat; margin-top: 20px;}#banner .banner_left{ width: 240px; height: 310px; background: url(./images/down_user_spr.png) no-repeat;margin: -20px 0 0 7px;}#banner .banner_download p{ width: 91px; height: 25px; background: url(./images/down_user_spr.png) no-repeat-253px 0; margin:0 auto; text-indent: -9999px; overflow: hidden;}#banner .banner_download p:first-child{ background-position: -253px 0; margin-top: 44px;}#banner .banner_download p:last-child{ background-position: -253px -25px;}/* CSS3简单的动画 */#banner .banner_download:hover p:first-child{ animation: .5s upMore;}@keyframes upMore{0%{ transform: translateY(-40px);opacity: 0;}100%{ transform: translateY(0);opacity: 1;}}#banner .banner_download:hover p:last-child{ animation: .5s downMore;}@keyframes downMore{0%{ transform: translateY(40px);opacity: 0;}100%{ transform: translateY(0);opacity: 1;}}/* CSS3简单的动画 */#banner .banner_user div{ width: 56px; height: 56px; border-radius: 50%; margin: 85px auto 0 auto; border: 2px #283257 solid;box-sizing: border-box; overflow: hidden;}#banner .banner_user p{ text-align: center; font-size: 12px; color: white; margin-top: 20px;}#banner .banner_user a{ color: #34f1d0;}
<div id="banner" class="container"><div class="banner_left l"><div class="banner_download"><p>下载游戏</p><p>DOWLOAD</p></div><div class="banner_user"><div><img src="./images/56x56.jpg" alt=""></div><p>欢迎<a href="#">登录</a>,进入飞车世界</p></div></div><div class="banner_center l"></div><div class="banner_right l"></div></div>

6.PC端游戏类型整页制作(8)

#banner .banner_list{ width: 497px; height: 253px; overflow: hidden; margin: 13px 0 0 6px;}#banner .banner_list_ul{ width: 2000px;}#banner .banner_list_ul li{ width: 497px; height: 253px; float: left;}#banner .banner_bottomline{  height: 37px; background: rgba(0,0,0,5); border-top: 1px #514b55 solid;position: absolute; bottom: 0; left: 0;}#banner .banner_bottomline_ul{ width: 100%; text-align: center; margin-top: 11px;}#banner .banner_bottomline_ul li{ display: inline-block; width: 15px; height: 15px; background: url(./images/top.png) no-repeat -603px -299ppx;}#banner .banner_bottomline_ul li.active{ background-position: -581px -299px ;}
            <div class="banner_center l"><div class="banner_list"><ul class="banner_list_ul"><li><a href="#"><img src="https://ossweb-img.qq.com/upload/adw/image/194/20221118/6bd39b88266fe7a2b44b874591ce3c4a.jpeg" alt=""></a></li><li><a href="#"><img src="https://img2.baidu.com/it/u=3740281595,290561413&fm=253&fmt=auto&app=138&f=JPEG?w=1082&h=500" alt=""></a></li><li><a href="#"><img src="https://img0.baidu.com/it/u=3263375089,181413362&fm=253&fmt=auto&app=138&f=JPEG?w=1273&h=500" alt=""></a></li></ul><div class="banner_bottomline"><ul class="banner_bottomline_ul"><li class="active"></li><li></li><li></li></ul></div></div></div>

7.PC端游戏类型整页制作(9)

#banner .banner_bottomline_leftbtn,#banner .banner_bottomline_rightbtn{ width: 12px; height: 22px; position: absolute; top: 5px; background: url(./images/top.png) no-repeat ; cursor: pointer;}#banner .banner_bottomline_leftbtn{ left: 5px; background-position: -542px -296px;}#banner .banner_bottomline_rightbtn{  right: 5px; background-position: -554px -296px;}#banner .banner_bottomline_leftbtn:hover{ background-position: -542px -325px;}#banner .banner_bottomline_rightbtn:hover{ background-position: -554px -325px;}#banner .banner_list_lt,#banner .banner_list_rt,#banner .banner_list_rb,#banner .banner_list_lb{ width: 12px; height: 12px;background: url(./images/top.png) no-repeat; position: absolute;}#banner .banner_list_lt{ left: -2px; top: -4px; background-position: -621px -299px;}#banner .banner_list_rt{ right: -2px; top: -4px; background-position: -634px -299px;}#banner .banner_list_rb{ right: -2px; bottom: -5px; background-position: -634px -312px;}#banner .banner_list_lb{ left: -2px; bottom: -5px; background-position: -621px -312px;}
<i class="banner-list_lt"></i>
<i class="banner-list_rt"></i>
<i class="banner-list_rb"></i>
<i class="banner-list_lb"></i>

8.PC端游戏类型整页制作(10)

#banner .banner_right{ width: 209px; height: 255px; position: relative; margin: 12px 0 0 12px;}#banner .banner_list_lt,#banner .banner_list_rt,#banner .banner_list_rb,#banner .banner_list_lb{ width: 15px;height: 15px; background: url(./images/top.png) no-repeat; position: absolute;}#banner .banner_right_lt{ left: -4px; top: -4px; background-position: -681px -298px;}#banner .banner_right_rt{ right: -4px; top: -4px; background-position: -696px -298px;}#banner .banner_right_rb{ right: -4px; bottom: -6x; background-position: -696px -313px;}#banner .banner_right_lb{ left: -4px; top: -6px; background-position: -681px -313;}
                <i class="banner_right_lt"></i><i class="banner_right_rt"></i><i class="banner_right_rb"></i><i class="banner_right_lb"></i>

十一、博文尚美首页

common.css

*{ margin: 0; padding: 0;}
ul,ol{ list-style: none;}
img{ display: block;}
a{ text-decoration: none; color: #646464;}
h1,h2,h3{ font-size: 16px;}
border{ font-family: Arial;}.l{ float: left;}
.r{ float: right;}
.clear:after{ content: ""; display: block; clear: both;}
.container{ width: 1080px; margin: 0 auto; position: relative;}
.container-fluid{ width: 100%;}#head{ height: 81px;}
#head .head_logo{ width: 162px; height: 44px; margin-top: 19px;}
#head .head_menu{ font-size: 14px; line-height: 81px;}
#head .head_menu li{ float: left; margin-left: 58px;}.area_title{ margin-top: 60px; text-align: center;}
.area_title h2{ height: 20px; line-height: 20px; font-size: 20px; color: #363636; background: 
url(../images/title_bg.png) no-repeat center 7px; font-weight: normal;}
.area_title p{ color: #9F9F9F; font-size: 14px; line-height: 34px;}
<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;}#banner .banner_list a{ display: block; width: 100%; height: 100%;}#banner .banner_btn{ width: 100%; position: absolute; bottom: 19px; z-index: 20; font-size: 0;text-align: center;}#banner .banner_btn li{ display: inline-block; width: 12px; height: 12px; border: 2px solid white; border-radius: 50%; box-sizing: border-box;  margin: 0 6px; cursor: pointer;}#banner .banner_btn li.active{ background: white;}#service{ overflow: hidden; min-height: 407px;}#service .service_list{ text-align: center;}#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-of-type(1) div{ background-image: url(./images/web1.png);}#service .service_list li:nth-of-type(2) div{ background-image: url(./images/mail1.png);}#service .service_list li:nth-of-type(3) div{ background-image: url(./images/graphic1.png);}#service .service_list li:nth-of-type(4) div{ background-image: url(./images/e-bussiness1.png);}#service .service_list h3{ font-size: 18px; color: #434343; line-height: 36px; margin-top: 25px;}#service .service_list p{ font-size: 14px; color: #6D6D6D; line-height: 22px;}#case{ background: #f8f8f8;}#case .container{ min-height: 460px; overflow: hidden;}#case .area_title{ margin-top: 55px;}#case .area_title h2{ color: #66C5B4;}#case .case_list{ margin-top: 28px;}#case .case_list li{ float: left; width: 340px; margin: 0 10px;}#case .case_btn{ width: 176px; height: 37px; background: #66C5B4; margin: 0 auto; border-radius: 25px;line-height: 37px; text-align: center; color: white; font-size: 14px; margin-top: 36px;}#case .case_btn a{ display: block; width: 100%; height: 100%; color: white;}#news{ min-height: 450px; overflow: hidden;}#news .area_title{ margin-top: 65px;}#news dl{ margin-top: 48px;}#news dt{ width: 234px;}#news dd{ width: 846px;}#news .news_list{ width: 100%;}#news .news_list li{ width: 50%; float: left; margin-bottom: 48px;}#news .news_date{ width: 71px; height: 70px; border-right: 1px solid #DCDCDC; text-align: center;}#news .news_date i{  color: #66C5B4; font-size: 39px; display: block; font-weight: bold;}#news .news_date span{ color: #999999; font-size: 20px; line-height: 36px;}#news .news_test{ width: 310px; margin-left: 20px;}#news .news_test h3{ font-size: 14px;}#news .news_test h3 a{ color: #3F3F3F;}#news .news_test p{ color: #A4A4A4; font-size: 12px; line-height: 21px; margin-top: 17px;}#foot{ background: #66c5b4;}#foot .container{ height: 54px; line-height: 54px; font-size: 12px; color: white;}#foot div a{ color: white; margin: 0 10px;}</style></head>
<body><div id="head" class="container"><div class="head-logo l"><a href="#"><img src="./images/logo.png" alt="博文尚美" title="博文尚美"></a></div><ul class="head_menu r"><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><div id="banner" class="container-fluid"><ul class="banner_list"><li class="active" style="background-image:url(./images/banner.png) ;"><a href="#"></a></li><li style="background-image:url(./images/banner.png) ;"><a href="#"></a></li><li style="background-image:url(./images/banner.png) ;"><a href="#"></a></li></ul><ol class="banner_btn"><li class="active"></li><li></li><li></li><li></li></ol></div><div id="service" class="container"><div class="area_title"><h2>服务范围</h2><p>OUR DERVICES</p></div><ul class="service_list"><li><div></div><h3>1.WEB DESIGN</h3><p>企业品牌网站设计/手机网站制作<br>动画网站创意设计</p></li><li><div></div><h3>2.GRAPHIC DESIGN</h3><p>标志logo设计/产品宣传册设计<br>企业广告/海报设计</p></li><li><div></div><h3>3.E-BUSINESS PLAN</h3><p>淘宝/天猫装修设计及运营推广<br>企业微博、微信营销</p></li><li><div></div><h3>4.MAILBOXAGENTS</h3><p>腾讯/网易企业邮箱品牌代理<br>个性化邮箱定制开发</p></li></ul></div><div id="case" class="container-fluid"><div class="container"><div class="area_title"><h2>{ 客户案例 }</h2><p>With the best professional technology, to design the best innovative website</p></div><ul class="case_list clear"><li><a href="#"><img src="./images/20141121095216750.png" alt=""></a></li><li><a href="#"><img src="./images/20141121095528549.png" alt=""></a></li><li><a href="#"><img src="./images/20141121105856226.png" alt=""></a></li></ul><div class="case_btn"><a href="#">VIEW MORE</a></div></div></div><div id="news" class="container"><div class="area_title"><h2>最新资讯</h2><p>TEH LATEST NEWS</p></div><dl><dt class="l"><img src="./images/xs1.png" alt=""></dt><dd class="l"><ul class="news_list"><li><div class="news_date l"><i>09</i><span>Jan</span></div><div class="news_test l"><h3><a href="#">网站排名进入前三的技巧说明</a></h3><p>很多客户都会纳闷为什么自己的网站老是优化不到搜素引擎首页,更不用说进首页前三了。那么网站优化···</p></div></li><li><div class="news_date l"><i>08</i><span>Jan</span></div><div class="news_test l"><h3><a href="#">flash网站制作的优缺点</a></h3><p>虽然HTML5程序语言出现,大有逐渐代替Flash网站的趋势,但是过于生硬的HTML5动画效果,始终···</p></div></li><li><div class="news_date l"><i>07</i><span>Jan</span></div><div class="news_test l"><h3><a href="#">做个网站多少钱?</a></h3><p>"做个网站多少钱?"很多客户打电话过来直接第一句就抛出来的问题。这好比买辆车多少钱,你是要···</p></div></li><li><div class="news_date l"><i>06</i><span>Jan</span></div><div class="news_test l"><h3><a href="#">哪些网站优化手法属于网站过度优化</a></h3><p>大部分人都想让自己的网站,一夜之间出现在搜索引擎并且独占鳌头。但是事实告诉我们罗马不是一···</p></div></li></ul></dd></dl></div><div id="foot" class="container_fluid"><div class="container"><p class="l">Copyright 2006-2014 Bowenshangmei Culture All Rights Resered</p><div class="r"><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Portfolio</a> | <a href="#">Contact</a> </div></div></div></body>
</html>

十二、QQ飞车首页

common.css

*{ margin: 0; padding: 0;}
ul,ol{ list-style: none;}
img{ display: block;}
a{ text-decoration: none; color: #464646;}
h1,h2,h3{ font-size: 16px;}
body{ font-family: Arial '宋体';}.l{ float: left;}
.r{ float: right;}
.clear:after{ content: ""; display: block; clear: both;}
.container{ width: 980px; margin: 0 auto; position: relative;}
.container-fluid{ width: 100%;}#head{ background: url(../images/head_bg.png) repeat-x;}
#head .container{ height: 41px;}
#head .head_logo{ width: 220px; height: 41px; background: url(../images/ost-bg.png) no-repeat 0 -38px;}
#head .head_logo a{ display: block; width: 100%; height: 100%; text-indent: -9999px; overflow: hidden;}
#head .head_ad{ margin-left: 8px;}
#head .head_menu{ font-size: 12px;}
#head .head_menu div{ height: 18px; margin-top: 13px; background: url(../images/ost.png) no-repeat;}
#head .head_menu .head_menu_czah{ margin-right: 26px; padding-left: 20px; background-position: left -92px;}
#head .head_menu .head_menu_top{ padding-left: 17px; background-position: right -85px;}
   <style>#main{ background: url(./images/mbg1216.jpg) no-repeat center 0;}#nav{ background:url(./images/nav_down_re.png) repeat-x, url(./images/nav.png) no-repeat center 0;}#nav .container{  min-height: 236px; overflow: hidden;}#nav .nav_logo{ width: 138px; height: 112px; margin: 15px auto;}#nav dl{ position: absolute; top: 0;}#nav dt{ height: 66px;}#nav dt a{ width: 100%; height: 100%; display: block; text-indent: -9999px; overflow: hidden;}#nav dd{ line-height: 27px; font-size: 12px; text-align: center;}#nav dd a{ color: white; position: relative;}#nav dd a:hover{ color: red; text-decoration: underline;}#nav dd a.hot:after,#nav dd a.new:after{ content: ""; display: block; width: 12px; height: 12px; background: url(./images/nav_tips.png) no-repeat; position: absolute; right: -15px; top: 0;}#nav dd a.hot:after{ background-position: 0 -12px;}#nav dd a.new:after{ background-position: 0 0;}#nav .nav_index{ width: 65px; left: 0;}#nav .nav_zl{ width: 69px; left: 98px;}#nav .nav_ss{ width: 74px; left: 203px;}#nav .nav_hd{ width: 68px; left: 325px;}#link{ height: 175px;}#link a{ width: 463px; height: 100%; display: block; margin: 0 auto;}#banner{ height: 276px; background: url(./images/top.png) no-repeat; margin-top: 20px;}#banner .banner_left{ width: 240px; height: 310px; background: url(./images/down_user_spr.png) no-repeat;margin: -20px 0 0 7px;}#banner .banner_download p{ width: 91px; height: 25px; background: url(./images/down_user_spr.png) no-repeat-253px 0; margin:0 auto; text-indent: -9999px; overflow: hidden;}#banner .banner_download p:first-child{ background-position: -253px 0; margin-top: 44px;}#banner .banner_download p:last-child{ background-position: -253px -25px;}/* CSS3简单的动画 */#banner .banner_download:hover p:first-child{ animation: .5s upMore;}@keyframes upMore{0%{ transform: translateY(-40px);opacity: 0;}100%{ transform: translateY(0);opacity: 1;}}#banner .banner_download:hover p:last-child{ animation: .5s downMore;}@keyframes downMore{0%{ transform: translateY(40px);opacity: 0;}100%{ transform: translateY(0);opacity: 1;}}/* CSS3简单的动画 */#banner .banner_user div{ width: 56px; height: 56px; border-radius: 50%; margin: 85px auto 0 auto; border: 2px #283257 solid;box-sizing: border-box; overflow: hidden;}#banner .banner_user img{ width: 100%; height: 100%;}#banner .banner_user p{ text-align: center; font-size: 12px; color: white; margin-top: 20px;}#banner .banner_user a{ color: #34f1d0;}#banner .banner_list{ width: 497px; height: 253px; overflow: hidden; margin: 13px 0 0 4px; position: relative;}#banner .banner_list_ul{ width: 2000px;}#banner .banner_list_ul li{ width: 497px; height: 253px; float: left;}#banner .banner_bottomline{ width: 100%; height: 37px; background: rgba(0,0,0,5); border-top: 1px #514b55 solid;position: absolute; bottom: 0; left: 0;}#banner .banner_bottomline_ul{ text-align: center; margin-top: 11px;}#banner .banner_bottomline_ul li{ display: inline-block; width: 15px; height: 15px; background: url(./images/top.png) no-repeat -603px -299ppx; cursor: pointer;}#banner .banner_bottomline_ul li.active{ background-position: -581px -299px;}#banner .banner_bottomline_leftbtn,#banner .banner_bottomline_rightbtn{ width: 12px; height: 22px; position: absolute; top: 5px; background: url(./images/top.png) no-repeat ; cursor: pointer;}#banner .banner_bottomline_leftbtn{ left: 5px; background-position: -542px -296px;}#banner .banner_bottomline_rightbtn{  right: 5px; background-position: -554px -296px;}#banner .banner_bottomline_leftbtn:hover{ background-position: -542px -325px;}#banner .banner_bottomline_rightbtn:hover{ background-position: -554px -325px;}#banner .banner_list_lt,#banner .banner_list_rt,#banner .banner_list_rb,#banner .banner_list_lb{ width: 12px; height: 12px;background: url(./images/top.png) no-repeat; position: absolute;}#banner .banner_list_lt{ left: -2px; top: -4px; background-position: -621px -299px;}#banner .banner_list_rt{ right: -2px; top: -4px; background-position: -634px -299px;}#banner .banner_list_rb{ right: -2px; bottom: -5px; background-position: -634px -312px;}#banner .banner_list_lb{ left: -2px; bottom: -5px; background-position: -621px -312px;}#banner .banner_right{ width: 209px; height: 255px; position: relative; margin: 12px 0 0 12px;}#banner .banner_list_lt,#banner .banner_list_rt,#banner .banner_list_rb,#banner .banner_list_lb{ width: 15px;height: 15px; background: url(./images/top.png) no-repeat; position: absolute;}#banner .banner_right_lt{ left: -4px; top: -4px; background-position: -681px -298px;}#banner .banner_right_rt{ right: -4px; top: -4px; background-position: -696px -298px;}#banner .banner_right_rb{ right: -4px; bottom: -6x; background-position: -696px -313px;}#banner .banner_right_lb{ left: -4px; top: -6px; background-position: -681px -313;}</style>
</head>
<body><div id="head" class="container-fluid"><div class="container"><div class="head_logo l"><a href="#">腾讯游戏</a></div><div class="head_ad l"><a href="#"><img src="./images/ad.jpg" alt=""></a></div><div class="head_menu l"><div class="head_menu_czsh l"><a href="#">成长守护平台</a></div><div class="head_menu_top l"><a href="#">腾讯游戏排行榜</a></div></div></div></div><div id="main" class="container-fluid"><div id="nav" class="container-fluid"><div class="container"><div class="nav_logo"><a href="#"><img src="./images/inside_logo.png" alt="QQ飞车" title="QQ飞车"></a></div><dl class="nav_index"><dt><a href="#">首页</a></dt></dl><dl class="nav_zl"><dt></dt><dd><a href="#">新手指引</a></dd><dd><a class="hot" href="#">官方漫画</a></dd><dd><a class="new" href="#">飞车手游</a></dd><dd><a href="#">精美壁纸</a></dd><dd><a href="#">游戏下载</a></dd></dl><dl class="nav_ss"><dt></dt><dd><a class="hot" href="#">SSC</a></dd><dd><a href="#">谁是车王</a></dd><dd><a href="#">全民争霸赛</a></dd></dl><dl class="nav_hd"><dt></dt><dd><a class="hot" href="#">版本中心</a></dd><dd><a href="#">合作专区</a></dd><dd><a href="#">CDK兑奖</a></dd></dl></div></div><div id="link" class="container"><a href="#"></a></div><div id="banner" class="container"><div class="banner_left l"><div class="banner_download"><p>下载游戏</p><p>DOWLOAD</p></div><div class="banner_user"><div><img src="./images/56x56.jpg" alt=""></div><p>欢迎<a href="#">登录</a>,进入飞车世界</p></div></div><div class="banner_center l"><div class="banner_list"><ul class="banner_list_ul"><li><a href="#"><img src="https://ossweb-img.qq.com/upload/adw/image/194/20221118/6bd39b88266fe7a2b44b874591ce3c4a.jpeg" alt=""></a></li><li><a href="#"><img src="https://img2.baidu.com/it/u=3740281595,290561413&fm=253&fmt=auto&app=138&f=JPEG?w=1082&h=500" alt=""></a></li><li><a href="#"><img src="https://img0.baidu.com/it/u=3263375089,181413362&fm=253&fmt=auto&app=138&f=JPEG?w=1273&h=500" alt=""></a></li></ul><div class="banner_bottomline"><ul class="banner_bottomline_ul"><li class="active"></li><li></li><li></li></ul><div class="banner_bottomline_leftbtn"></div><div class="banner_bottomline_rightbtn"></div></div><i class="banner-list_lt"></i><i class="banner-list_rt"></i><i class="banner-list_rb"></i><i class="banner-list_lb"></i></div></div><div class="banner_right l"><a href="#"><img src="" alt=""></a><i class="banner_right_lt"></i><i class="banner_right_rt"></i><i class="banner_right_rb"></i><i class="banner_right_lb"></i></div></div><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div></body>
</html>

http://www.ppmy.cn/news/416584.html

相关文章

【干货】ArcGIS的一些小技巧分享,值得学习!

1、ArcMap突然打不开了或者崩溃&#xff1a; 查看安全软件&#xff08;例如360安全软件的拦截&#xff09;&#xff0c;是不是误删了ArcGIS相关文件。 2、ArcMap一些功能突然不能用 卸载安装的第三方插件&#xff0c;参见上一个问题 3、ArcMap启动慢 删除Normal.mxt文件&#x…

git在windows及linux(源码编译)环境下安装

git在windows及linux(源码编译)环境下安装 环境信息: 系统版本:CentOS Linux release 7.9.2009 (Core) git指令安装: yum install -y git 一、git在windows下安装 下载地址:https://git-scm.com/ 默认安装即可 验证 git --version 二、git在linux下安装 下载地址…

【Java之JAR包解析】(三)除核心包 rt.jar之外的其他JAR包~

JAR包解析之其他jar包 前言:one: access-bridge-64.jar:two: charsets.jar:three: cldrdata.jar:four: deploy.jar:five: jce.jar:six: jfr.jar:seven: jfxrt.jar:eight: jfxswt.jar:nine: jsse.jar:keycap_ten: localedata.jar11、management-agent.jar12、nashorn.jar13、plu…

计算机组成原理(考研408)练习题#3

用于复习408或计算机组成原理期末考试。如有错误请在评论区指出。 So lets start studying with questions! それでは、問題の勉強を始めましょう&#xff01; 1. 定点整数原码编码[x]原1110100B 的真值为_________。 首先&#xff0c;1110100B是一个8位二进制数&#xff0c…

flutter:网络请求、json数据转为Model

参考 老孟 flutter&#xff1a; 网络请求-dio http http 是一个可组合&#xff0c;基于Future的库&#xff0c;用于HTTP请求。该软件包包含高级功能和类&#xff0c;可轻松使用HTTP资源。它是多平台的&#xff0c;并且支持移动设备&#xff0c;台式机和浏览器。此软件包为官…

Flutter如何获取屏幕的分辨率和实际画布的分辨率

Flutter如何获取分辨率 在Flutter中&#xff0c;你可以使用MediaQuery来获取屏幕的分辨率和实际画布的分辨率。 要获取屏幕的分辨率&#xff0c;你可以使用MediaQuery.of(context).size属性&#xff0c;它返回一个Size对象&#xff0c;其中包含屏幕的宽度和高度。下面是一个获…

金山词霸 v10.4.5 for Android

本文已迁移至&#xff1a;https://www.cnblogs.com/coco56/p/12733553.html

今天谷歌金山词霸2.0正式发布了

忙碌了好几天&#xff0c;终于盼来了今天&#xff0c;直到今天早上还在不断地校对相关的细节&#xff0c;不断地在担心可能会出现的问题。 一个同事说&#xff0c;今天的口诀是“信春哥 报平安”。 谷歌词霸2.0是首款面向翻译写作人士的产品&#xff0c;相关功能配置齐全&#…