****使用CSS/HTML创建一个简单的页面****
效果图
页面效果，尺寸为题分为两张图
学习了CSS以及HTML基础知识使用的是一些很基础的知识，画出了框架。
有一些简单的页面功能: 连接的hover效果 ，设置锚点。
CSS样式文件夹名称为styl.css，下载以后应当注意引入CSS文件的文件名称。
初学基础知识，为练习，甚是简陋，待日后完善。
**
HTML代码
**
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css"></head><body><div id="top" class="w header"><!-- 头部开始--------------------------------------- --><div class="logo"><img src="imgs/logo.jpg" alt=""></div><div class="nav"><ul><li> <a href="#">导航栏</a></li><li><a href="#" >jojo故事起源</a></li><li><a href="#">剧情发展</a></li></ul></div><div class="search"><input type="text" value="输入关键字"><button><img src="imgs/search_button.png" alt="cao"></button></div> <div class="id"><a href="#">ID:JOJOJOJOJOJO</a></div></div><!-- 头部结束----------------------------- --><!-- 中间部分开始------------------- --><div class="banner"><div class="w center"><!-- 左边部分 --><div class="left"><ul><li><a href="#jojo1">jojo1:幻影之血<span>></span></a></li><li><a href="#jojo2">jojo2:战斗潮流<span>></span></a></li><li><a href="#jojo3">jojo3:星尘斗士<span>></span></a></li><li><a href="#jojo4">jojo4:不灭钻石<span>></span></a></li><li><a href="#jojo5">jojo5:黄金之风<span>></span></a></li></ul></div><!-- 右边部分 --><div class="right"><h1>剧  集</h1><div class="p"><ul><li><a href="#">P1>黄金体验(Gold Experience)</a></li> <hr><li><a href="#">P2>布加拉提到来</a></li> <hr><li><a href="#">P3>前往会见监狱中的黑帮</a></li><hr><li><a href="#">P4>黑帮入门</a></li><hr><li><a href="#">P5>目标是波尔波的遗产!</a></li></ul></div></div></div><!-- 中间部分结束------------- --><!-- 底部开始------- ------------------------------><!-- jojo1详情----------------------------------- --><div id="jojo1" class="one w" ><div><h2 class="title">幻影之血</h2></div></div><!-- jojo2详情 ---------------------------------> <div id="jojo2" class="two w"><div><h2 class="title">战斗潮流</h2></div></div> <!-- jojo3详情----<a href="#top">返回顶部 @shihao</a>--------------------------------><div id="jojo3" class="three w"><div><h2 class="title">星尘斗士</h2></div><!-- jojo4详情 -------------------------------------------> </div><div id="jojo4" class="four w"><div><h2 class="title">不灭钻石</h2></div></div><!-- jojo5详情 -----------------------------------------><div id="jojo5" class="five w"><div><h2 class="title">黄金之风</h2></div></div><!-- 底部信息部分-------------------- --> <div class="end"><pre> <a href="#top">返回顶部 </a> 版权所有: copyright@shihao 咨询投诉电话:17852035928</pre></div></div></body></html>
**
CSS部分代码
**
* {margin:0;padding: 0;}.w {width: 1200px;margin: auto;}a {text-decoration: none;}body {background-color: rgb(238, 241, 241);}li {list-style: none;}/* header部分开始--------------------------------- */.header{height:40px;margin:30px auto;text-align:center;font-size: 10px;}.logo {float: left;width: 128px;height: 40px;}.logo img {margin-top: 7px;}.nav li {float: left;height: 20px;margin-left: 5px;padding: 10px;padding-left: 30px;}.nav li:hover {background-color:pink;}.nav ul li a{float: left;text-decoration: none;font-size: 20px;}.nav ul li a:hover{border-bottom: 2px solid black;}.search {float: left;width: 412 ;height: 40px;background-color:wheat;margin-left: 20px;}.search input {float: left;width: 360px;height: 38px;border: 1px solid skyblue;padding-left: 5px;}.search button {float: left;width: 40px;height: 40px;/* button有边框，要去掉 */overflow:hidden;border: 1px solid skyblue;}.id {float: left;height: 20px;overflow: hidden;padding: 10px;margin-left: 50px;font-size: 20px;border-radius: 5px;}.id a {text-decoration: none;font-size: 20px;padding: 10px 0;}.id a:hover {background-color: pink;}/* banner部分开始------------------------------------------------- */.banner{height: 421px;background-color: rgb(114, 92, 238);background-image: url(imgs/cbgd.jpg);}.center{background-color: silver;}.center{height: 420px;background-color: snow;background-image: url(imgs/jojo.jpg);}.left {float: left;width: 220px;height: 420px;background-color: rgba(38, 33, 105, 0.774);}.left ul li a{font-size: 20px;text-decoration: none ;padding-left: 10px;color: rgb(238, 242, 245);}.left ul li{width: 200px;height: 40px;padding-top: 44px;}.left ul li a:hover {color: rgb(51, 5, 104);}.left ul li a span {float: right;/* padding-right: 10px; */}/* 右边部分开始--------- */.right {float:right;width: 230px;height: 300px;background-color: rgb(255, 235, 205);margin-top: 100px;}.right h1 {height: 45px;background-color: rgb(243, 43, 43);text-align: center;}.p ul li {border: 5px;padding: 12px;font-size: 15px; }.p ul li:hover{background-color: rgb(156, 199, 224);}/* 分剧集介绍部分开始 */.one {height: 300px;background-color: yellow;} .two {height: 300px;background-color: rgb(0, 4, 255);} .three {height: 300px;background-color: rgb(233, 115, 19);} .four {height: 300px;background-color: rgb(26, 195, 224);} .five {height: 300px;background-color: rgb(87, 23, 87);}.title {float: left;font-size: 35px;padding: 20px;}/* 底部----------------------- */.end {text-align: center;height: 30px;background-color: rgb(10, 22, 61);}.end pre {color: rgb(85, 87, 241);font-size: 20px;}.end a {color: wheat;font-size: 20px;}
