当前位置：首页 > article >正文

CSS/HTML简单静态页面

article 2025/9/18 16:20:54

                           ****使用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>剧&nbsp&nbsp集</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;
}