HTML css背景图练习——魔兽世界官网页面

index.css

body {background: url(../CSS学习/背景图/img/bg.jpg) no-repeat center top;
}.clearfix::after{content: "";display: block;clear: both;}.header{width: 1198px;height: 73px;/* 文字居中 */line-height: 73px;color: #f8b770;background-color: red;/* 区域居中 */margin: 0 auto;/* 距上边的距离 */margin-top: 45px;background: url(../CSS学习/背景图/img/bg_nav.jpg);border: 1px solid #3f2a22;border-left: none;border-right: none;position: relative;}
.header nav a{float: left;width: 161px;height: 73px;text-align: center;/* 边框会影响尺寸所以先border-box */box-sizing: border-box;border: 1px solid #3f2a22;border-bottom: none;border-top: none;
}.header nav a:nth-child(3){margin-right: 232px;
}.header .logo{position: absolute;width: 238px;height: 118px;background: url(../CSS学习/背景图/img/logo.png) no-repeat;/* 水平居中 浏览器微调 */left: 7px;top: -37px;right: 0;margin: auto;}.header .logo h1{display: none;/* 隐藏该元素 */
}.menu{text-align: center;margin-top: 473px;
}.menu a{display: inline-block;/* 行盒居中 设置外层容器text-aline */width: 323px;height: 105px;background: url(../CSS学习/背景图/img/btns.png) no-repeat;}.menu a span{display: none;
}.menu a.download{background-position: -323px 0;
}.adv{width: 1203px;margin: 76px auto;}.adv .item{float: left;width: 290px;height: 200px;margin-right: 13px;outline: 1px solid #3f2a22;/* 外边框不占据chic */}.adv .item:last-child{margin-right: 0;
}.adv .item .title{height: 50px;line-height: 50px;text-align: center;background-color: #211510;color: #f8b700;border-bottom: 1px solid #3f3a22;box-sizing: border-box;}.adv .item .img{height: 150px;
}.adv .item .img img{width: 290px;height: 150px;
}

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="reset.css"><link rel="stylesheet" href="index.css">
</head>
<body><header class="header"><nav><a href="">进入官网</a><a href="">账号注册</a><a href="">充值管理</a><a href="">游戏下载</a><a href="">客户中心</a><a href="">官方论坛</a></nav><a href="" class="logo"><h1>魔兽世界</h1></a></header><div class="menu"><a href="" class="detail"><span>了解详情</span></a><a href="" class="download"><span>客户端下载</span></a></div><div class="adv clearfix"><div class="item"><div class="title"><h2><a href="">点卡兑换现已开启</a></h2></div><div class="img"><a href=""><img src="../CSS学习/背景图/img/1.jpg" alt=""></a></div></div><div class="item"><div class="title"><h2><a href="">直升110级现在开启</a></h2></div><div class="img"><a href=""><img src="../CSS学习/背景图/img/2.jpg" alt=""></a></div></div><div class="item"><div class="title"><h2><a href="">客户端下载</a></h2></div><div class="img"><a href=""><img src="../CSS学习/背景图/img/3.jpg" alt=""></a></div></div><div class="item"><div class="title"><h2><a href="">免费注册</a></h2></div><div class="img"><a href=""><img src="../CSS学习/背景图/img/4.jpg" alt=""></a></div></div></div>
</body>
</html>

reset.css

复习常用

1.文字居中

line-height= height

2.区域居中
margin: 0 auto;

3.box-sizing
边框会影响尺寸所以先border-box
box-sizing: border-box;

4.水平居中
浏览器微调 */
left: 0;
top: 0;
right: 0;
margin: auto;
可用浏览器微调

5.隐藏该元素
display: none;

6.行盒居中
设置外层的text-align

.menu{text-align: center;margin-top: 473px;
}.menu a{display: inline-block;}/* 行盒居中 设置外层容器text-aline */

7. outline

outline: 1px solid #3f2a22;
外边框不占据尺寸

HTML css背景图练习——魔兽世界官网页面相关推荐

css背景图不失真_CSS实现页面背景图片模糊内容不模糊的方法
CSS实现页面背景图片模糊内容不模糊的方法,如果对你有帮助就看看吧,挺实用的一个CSS背景模糊效果,适合做一些非常唯美的网页,给人一种很模糊却又带着一丝清晰的感觉. 代码: Document .ban ...
游戏网站的设计与实现（HTML和CSS实现魔兽世界官网）
学习游戏网站的设计与实现(HTML和CSS实现魔兽世界官网),本文实现该系统的功能截图,HTML和CSS部分关键语句,系统功能图等供大家参考整个页面是由很多很多DIV标签和ul标签构成 /*部分代码 ...
css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: 1 2 3 4 5 6 7 8 9 10 <style> html,body{margin:0px;padding:0px;} #backgrou ...
php背景图片随页面大小改变,css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: html,body{margin:0px;padding:0px;} #background { position: fixed;top: 0;left: 0 ...
css背景图background - 多背景定义
css背景图background - 多背景定义 1. 方法一 .bg{height:600px;background: url(../../static/images/slider/zplc.png ...
i css svg,如何设置 CSS 背景图中的 SVG 的颜色
Coloring SVGs in CSS Background Images 如何设置 CSS 背景图中的 SVG 的颜色 I love using SVG in CSS background ima ...
HTML CSS 背景图居中属性background-position
HTML CSS背景图居中(无序列表) --背景重复:backgroung-repeat:--no-pepeat:不重复--repeat-x:水平水平方向平铺; --repeat-y:垂直方向平铺-- ...
html图片撑开盒子,css背景图撑开盒子高度
本文原地址需求: 给定1980px*1080px背景图,在网页显示时,图片宽度等于浏览器宽度,高度根据原图比例显示对应高度,假设图片最小宽度设置为1024px,则最小高度为1024/(1980*10 ...
CSS背景图和渐变色共存
CSS背景图和渐变色共存需求场景是在一个DOM元素上需要背景图和渐变色共存实现 background: url(https://img.alicdn.com/imgextra/i4/1881744 ...

HTML css背景图练习——魔兽世界官网页面

index.css

html

reset.css

复习常用

HTML css背景图练习——魔兽世界官网页面相关推荐

最新文章

热门文章

HTML css背景图练习——魔兽世界官网页面

index.css

html

reset.css

复习 常用

HTML css背景图练习——魔兽世界官网页面相关推荐

最新文章

热门文章

复习常用