一、生态家居网页
<!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>
#header {
height: 70px;
margin-bottom: 30px;
}
#header-content{
width: 1170px;
height: 100%;
margin: 0 auto;
line-height: 70px;
}
#header-content h1,#header-content ul,#header-content li{
float: left;
margin: 0;
}
#header-content h1{
color: #C7AB84;
margin-right: 100px;
}
#header-content ul{
list-style: none;
padding-left: 0;
}
#header-content ul li{
width: 100px;
}
#main {
width: 1170px;
height: 770px;
margin: 0 auto;
padding:0 15px;
box-sizing: border-box;
}
#main .item,#main img{
float: left;
width: 570px;
}
#main .item{
padding:30px;
box-sizing: border-box;
}
#main .item ul{
list-style: none;
padding: 0;
height: 25px;
}
#main .item li{
float: left;
height: 25px;
width: 150px;
padding-left: 35px;
box-sizing: border-box;
background-repeat: no-repeat;
background-position:0px 0px;
font-weight: bold;
}
#main .item button{
background-color: #51311A;
color: white;
border: none;
height: 30px;
margin-top: 30px;
}
#main .f-right{
float: right;
}
.icon-1{
background-image: url("images/1.png");
}
.icon-2{
background-image: url("images/2.png");
}
.icon-3{
background-image: url("images/3.png");
}
</style>
</head>
<body>
<!-- 头部 -->
<div id="header">
<div id="header-content">
<h1>生态家居</h1>
<ul>
<li>首页</li>
<li>设计师</li>
<li>服务</li>
<li>案例</li>
<li>公司</li>
<li>联系我们</li>
</ul>
</div>
</div>
<!-- 主体 -->
<div id="main">
<div class="item">
<ul>
<li class="icon-1">护理</li>
<li class="icon-2">安装</li>
<li class="icon-3">改造</li>
</ul>
<p>
美式风格，顾名思义是来自于美国的装修和装饰风格。是殖民地风格中最著名的代表风格，某种意义上已经成了殖民地风格的代名词。美国是个移民国家，欧洲各国各民族人民来到美洲殖民地，把各民族各地区的装饰装修和家具风格都带到了美国，同时由于美国地大物博，极大的放开了移民们对尺寸的欲望，使得美式风格以宽大，舒适，杂糅各种风格而著称。
</p>
<button>了解更多》</button>
</div>
<img src="images/wrk.jpg" alt="">
<div class="item f-right">
<ul>
<li class="icon-1">护理</li>
<li class="icon-2">安装</li>
<li class="icon-3">改造</li>
</ul>
<p>
美式风格，顾名思义是来自于美国的装修和装饰风格。是殖民地风格中最著名的代表风格，某种意义上已经成了殖民地风格的代名词。美国是个移民国家，欧洲各国各民族人民来到美洲殖民地，把各民族各地区的装饰装修和家具风格都带到了美国，同时由于美国地大物博，极大的放开了移民们对尺寸的欲望，使得美式风格以宽大，舒适，杂糅各种风格而著称。
</p>
<button>了解更多》</button>
</div>
<img src="images/wrk1.jpg" alt="" class="f-right">
</div>
</body>
</html>
二、伪元素
1.基础
<!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>
p{
width: 500px;
height: 300px;
}
p::first-letter{
color: blue;
font-size: 30px;
font-weight: bold;
}
p::first-line{
color: red;
}
::selection{
color: green;
background-color: yellow;
}
p::before{
content: "<span>span哈哈哈<span>";
}
p::after{
content: "<span>span哈哈哈<span>";
}
</style>
</head>
<body>
<p>
哈哈哈哈这是段落里的内容，哈哈哈哈这是段落里的内容哈哈哈哈这是段落里的内容
</p>
</body>
</html>
2.应用
<!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{
width: 200px;
height: 300px;
background-color: red;
position: relative;
}
div::before{
content:" ";
display: block;
position: absolute;
width: 0px;
height: 0px;
top: 0px;
left: 0px;
border:20px solid transparent;
border-left:20px solid green;
/* background-color: blue; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.导航
<!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{
width: 200px;
height: 30px;
background-color: red;
margin-left: 200px;
position: relative;
}
div::after{
content: " ";
display: block;
width: 0px;
height: 0px;
position: absolute;
top: 0;
right: -30px;
border:15px solid transparent;
border-left:15px solid green;
}
div::before{
content: " ";
display: block;
width: 0px;
height: 0px;
position: absolute;
top: 15px;
left: -15px;
border:15px solid transparent;
border-right:15px solid black;
z-index: -1;
}
</style>
</head>
<body>
<div>这是导航</div>
</body>
</html>
4.导航2
<!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>
ul{
list-style: none;
margin: 0 auto;
padding: 0;
width: 670px;
font-size: 0px;
}
li{
width: 150px;
height: 40px;
margin-left: 5px;
background-color: blue;
display: inline-block;
text-align: center;
color:white;
line-height: 40px;
font-size: 18px;
position: relative;
}
.right::after{
content: " ";
display: block;
position: absolute;
width: 0;
height: 0;
border:20px solid transparent;
border-left:20px solid blue;
top: 0;
right: -40px;
z-index: 1;
}
.left::before{
content: " ";
display: block;
position: absolute;
width: 0;
height: 0;
border:20px solid transparent;
border-left:20px solid white;
top: 0;
left: 0px;
}
</style>
</head>
<body>
<ul>
<li class="right">Home</li>
<li class="right left">About</li>
<li class="right left">information</li>
<li class="left">Connect</li>
</ul>
</body>
</html>
三、HTML5
1.新标签
<!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>
</head>
<body>
<header>头部区域
<nav>
<a href="#">上一页</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">下一页</a>
</nav>
</header>
<main>
主体内容
<!-- <hgroup>
<h1>课程介绍</h1>
<h4>Course</h4>
</hgroup>
<section>
<h1>Part 1</h1>
<p>something darker</p>
</section> -->
<input type="text" list="url-list">
<!-- datalist -->
<datalist id="url-list">
<option value="">www.baidu.com</option>
<option value="">www.qq.com</option>
<option value="">www.163.com</option>
</datalist>
<table>
<tr>
<th>商品编号</th>
<th>商品名称</th>
</tr>
<tr>
<td>001</td>
<td>卫龙辣条</td>
</tr>
<tr>
<td colspan="2">
<button>
结算
</button>
</td>
</tr>
</table>
</main>
<footer>页面尾部</footer>
</body>
</html>
2.音视频
<!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>
</head>
<body>
<!-- <video src="媒体/test1.mp4" autoplay >
<!-- 备用资源 -->
<source src="媒体/test.MP4" type="video/ogg">
</video> -->
<audio src="媒体/夜曲.mp3" controls autoplay></audio>
</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>
body{
margin: 0;
background-image: url("images/bg.jpg");
background-repeat: no-repeat;
background-size: cover;
}
ul,p{
margin: 0;
padding: 0;
}
#header{
height: 84px;
background-color:rgba(0,0,0,0.7);
}
#header-content{
height: 100%;
width: 1300px;
margin: 0 auto;
line-height: 84px;
font-size: 0;
}
#header-content ul ,#header-content p,#header-content li,#header-content img,#header-content button{
display:inline-block;
vertical-align: middle;
font-size: 16px;
}
#header-content ul{
list-style: none;
height: 100%;
font-size: 0px;
}
#header-content ul li{
height: 100%;
font-size: 16px;
}
#header-content ul li a{
display: block;
height: 100%;
width: 110px;
line-height: normal;
text-align: center;
box-sizing: border-box;
padding-top: 20px;
text-decoration: none;
color:#ccc;
}
#header-content ul li a .link-title{
font-size: 12px;
color: #333;
display: block;
margin-top: 10px;
}
#header-content ul li a:hover{
color: rgb(228, 182, 83);
background-image: url("images/index.png");
background-repeat: no-repeat;
}
#header-content ul li a:hover .link-title{
color: rgb(228, 182, 83);
}
#header-content button{
background-image: url("images/nav_search.png");
background-repeat: no-repeat;
background-color: transparent;/*透明色*/
width: 27px;
height: 26px;
border: none;
}
#header-content #user-img{
padding:2px;
border:1px solid rgb(228, 182, 83);
border-radius: 50%;
margin-left: 40px;
}
#header-content p{
height: 100%;
line-height: normal;
margin-left: 5px;
}
#header-content p a{
display: block;
width: 100%;
color: white;
text-decoration: none;
box-sizing: border-box;
padding-top: 20px;
}
#header-content p span{
color: #ccc;
font-size: 12px;
}
#fixed-code{
width: 254px;
height: 494px;
position: fixed;
right: 0px;
margin:auto;
top: 0px;
bottom:0;
background-image: url("images/r_navBg.png");
background-repeat: no-repeat;
}
#fixed-code #dialog{
width: 165px;
height: 145px;
/* background-color: red; */
background-image: url("images/r_dj.png");
background-repeat: no-repeat;
overflow: hidden;
}
#fixed-code #dialog p{
width: 88px;
height: 36px;
color: #62401b;
font-size: 14px;
font-weight: bold;
margin-top: 35px;
margin-left: 12px;
}
#fixed-code ul{
width: 117px;
height: 223px;
margin: 0 auto;
list-style: none;
}
#fixed-code ul li{
height: 38px;
position: relative;
}
#fixed-code li.r-code{
height: 117px;
}
#fixed-code li.r-code img{
width: 100%;
height: 100%;
}
/* li雪碧图 */
.link-weibo{
background-image: url('images/r_all.png');
background-repeat: no-repeat;
background-position:-122px -120px;
}
.link-weibo:hover{
background-position:-122px -240px;
cursor: pointer;
}
.link-weibo:hover .ab-weibo{
display: block;
}
.link-weibo .ab-weibo{
width: 115px;
height: 144px;
background-image: url("images/weibo.jpg");
background-repeat: no-repeat;
background-position: 7px 7px;
position: absolute;
top: -50px;
left: -117px;
color: #fff;
border:1px solid rgb(228, 182, 83);
background-color: rgba(0,0,0,0.7);
display: none;
}
.link-weibo .ab-weibo p{
width: 115px;
height: 34px;
font-size: 12px;
margin-top: 107px;
text-align: center;
}
.link-weibo .ab-weibo p span{
color: rgb(228, 182, 83);
}
</style>
</head>
<body>
<!-- 头部 -->
<div id="header">
<div id="header-content">
<img src="images/logo.png" alt="" id="logo">
<ul>
<li>
<a href="#">
<span>游戏资料</span>
<span class="link-title">DATA</span>
</a>
</li>
<li>
<a href="#">
<span>游戏资料</span>
<span class="link-title">DATA</span>
</a>
</li>
<li>
<a href="#">
<span>游戏资料</span>
<span class="link-title">DATA</span>
</a>
</li>
<li>
<a href="#">
<span>游戏资料</span>
<span class="link-title">DATA</span>
</a>
</li>
<li>
<a href="#">
<span>游戏资料</span>
<span class="link-title">DATA</span>
</a>
</li>
<li>
<a href="#">
<span>游戏资料</span>
<span class="link-title">DATA</span>
</a>
</li>
<li>
<a href="#">
<span>游戏资料</span>
<span class="link-title">DATA</span>
</a>
</li>
</ul>
<button></button>
<img src="images/user-img.png" alt="" id="user-img">
<p>
<a href="#">欢迎登陆</a>
<span>登陆后查看战绩</span>
</p>
</div>
</div>
<!-- 固定区域 -->
<div id="fixed-code">
<!-- 对话框 -->
<div id="dialog">
<p>下载王者营地每天领福利~</p>
</div>
<!-- 二维码列表 -->
<ul id="codes">
<li class="r-code"><img src="images/r_code.jpg" alt=""></li>
<li class="link-weibo">
<a href="#"></a>
<div class="ab-weibo">
<p>扫码<span>关注官方微博</span><br>获取<span>一手爆料及福利</span></p>
</div>
</li>
<li class="link-weixin"><a href="#"></a></li>
<li class="link-shipin"><a href="#"></a></li>
</ul>
</div>
</body>
</html>
五、音频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="music();">播放或暂停</button>
<audio id="music" controls="controls" preload="auto" autoplay >
<source src="夜曲.mp3" type="audio/mp3"/>
如果浏览器不支持，那么就会显示这段话
</audio>
<script>
function music() {
var m = document.getElementById('music');
if(m.paused){
//暂停
m.play();//播放
}else{
m.pause();
}
}
</script>
</body>
</html>
六、视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,html{
height: 100%;
margin:0px;
}
/* #video{
width: 100%;
height: 100%;
position: absolute;
top:0px;
left: 0px;
z-index: -1;
} */
</style>
<!--[if ie 8]>
<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>
<![endif]-->
</head>
<body>
<button onclick="">播放或暂停</button>
<input type="text">
<video src="test1.mp4" id="video" controls autoplay preload="auto" ></video>
<script>
function play() {
var music = document.getElementById("video");
//判断如果音乐停止播放中，就让他播放。。。
if (music.paused) {
music.play();
}else{
music.pause();
}
}
//调用函数
setTimeout(play, 1);
</script>
</body>
</html>
🌈本篇博客的内容【网页核心页面设计】已经结束。
🌈若对你有些许帮助，可以点赞、关注、评论支持下博主，你的支持将是我前进路上最大的动力。
