CSS/HTML简单静态页面
程序员文章站
2022-04-10 08:29:19
****使用CSS/HTML创建一个简单的页面****效果图页面效果，尺寸为题分为两张图学习了CSS以及HTML基础知识使用的是一些很基础的知识，画出了框架。有一些简单的页面功能: 连接的hover效果 ，设置锚点。CSS样式文件夹名称为styl.css，下载以后应当注意引入CSS文件的文件名称。初学基础知识，为练习，甚是简陋，待日后完善。**HTML代码**
****使用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;
}
本文地址：https://blog.csdn.net/weixin_43865846/article/details/109564201
下一篇： Bug