一、生态家居网页
<!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>
🌈本篇博客的内容【网页核心页面设计】已经结束。
🌈若对你有些许帮助，可以点赞、关注、评论支持下博主，你的支持将是我前进路上最大的动力。