使用HTML+CSS制作一个简单的网页

简单学习了一下HTML和CSS，制作了下面这个网页（第一次做还在学习中），里面包含一些基础的布局包括导航条、分页栏、悬浮列表等内容。

网页预览（网页中的图片与图标均来自阿里巴巴矢量图标库）

CSS代码
里面包含悬浮、画面自适应等效果

* {box-sizing: border-box;
}
body {padding: 5px;background: #4682B4;
}
.header {padding: 10px;background: #87CEEB;overflow: auto;
}
.header a {text-decoration: none;
}
.biaoti1 {display: inline-block;
}
.relation {display: inline-block;float: right;margin: 18px 200px 0 0;
}
.relation a{text-decoration: none;color: #FFFACD;
}
.relation a:hover {color: blue;
}
.biaoti1 h1 {padding: 0 20px 0 20px;margin: 8px 8px 0 30px;font-family: Serif;font-size: 5vw;color: #FFFACD;text-shadow: 4px 4px 8px #8B4513;
}
.biaoti1 p {padding: 0 20px 0 20px;margin: 8px 8px 0 50px;font-family: Arial;font-size: 2vw;color: #FFFACD;text-shadow: 4px 4px 8px #8B4513;
}
.logo {display: inline-block;margin: 8px 0 0 100px;max-width: 11%;height: auto;border-radius: 25px;
}
.topnav {text-align:center; overflow: hidden;background-color: #AFEEEE;
}
.topnav li {display: inline;
}
.topnav a {display: inline;color: #F8F8FF;text-align: center;padding:16px;font-family: Arial;text-decoration: none;
}
.topnav a:hover {background-color: #FFFACD;color: black;
}
.active {background-color: #4CAF50;
}
.row:after {content: "";display: table;clear: both;
}
.menubtn {background-color: #00BFFF;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;
}
.menu {overflow: visibleposition: relative;display: inline-block;
}
.menu-content {display: none;position: absolute;background-color: #FFFAF0;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;padding: 0;margin: 12px 0 0 0;min-width: 140px;
}
.menu-content li {display: block;}
.menu-content a {color: black;text-align:left;padding: 12px 16px;text-decoration: none;display: block;
}
.menu-content a:hover {background-color: #f1f1f1}
.menu:hover .menu-content {display: block;background-color: white;
}
.menu:hover .menubtn {background-color: #FFFACD;color: black;
}
.content {float: left;width: 20%;padding: 10px;height: 500px;font-size: 17px;letter-spacing: 2px;text-indent: 30px;line-height: 1.5;                                      border-radius: 9px;overflow: auto;background-color: #ADD8E6;
}
.content-main {float: left;width: 60%;padding: 10px;height: 500px;font-size: 17px;letter-spacing: 2px;text-indent: 30px;line-height: 1.5;border-radius: 9px;overflow: auto;background-color: #D4F2E7;
}
.content:hover {background-color: #FFFACD;box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.3), 0 6px 20px 6px rgba(0, 0, 0, 0.19);
}
.content-main:hover {background-color: #FFFACD;box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.3), 0 6px 20px 6px rgba(0, 0, 0, 0.19);
}
@media screen and (max-width:1000px) {//画面自适应.row ,.leftcolumn ,.rightcolumn ,.row2 {width: 100%;  }
}
@media screen and (max-width:900px) {.topnav ,.menu ,.relation a ,.slidenav {display:none;}.logo {margin:0;padding:0;}.biaoti1 h1 ,.biaoti1 p{     width: 30%;  height: 30%;margin:0;padding: 0;}
}
.biaoti2 {text-align: center;font-family: Arial;font-size: 40px;color: #FFFACD;
}
.leftcolumn {   float: left;width: 75%;
}
.card-hp {display: inline-block;
}
.card-img {display: inline-block;float: right;
}
.rightcolumn {float: left;width: 25%;padding-left: 15px;
}
.card-img-right {text-align: center;
}
.card {background-color: white;padding: 20px;margin-top: 20px;overflow: auto;border-radius: 5px;
}
.card:hover {background-color: rgba(173,216,230, 0.5);box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.3), 0 6px 20px 6px rgba(0, 0, 0, 0.19);
}
.row2 {background-color: #D4F2E7;
}
.row2:after {content: "";display: table;clear: both;
}
.chuanglian {margin: 5px;border: 1px solid #ccc;float: left;width: 200px;border-radius: 0 0 15px 15px;
}
.chuanglian img {width: 100%;height: auto;
}
.chuanglian:hover {box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.3), 0 6px 20px 6px rgba(0, 0, 0, 0.19);
}
.text{padding: 10px;text-align: center;border-radius: 0 0 15px 15px;background-color: rgba(173,216,230, 0.5);
}
.text:hover {color: green;
}
.center {text-align: center;background-color: rgba(173,216,230, 0.5);
}
.pagination {display: inline-block;padding: 5px 0 0 0;
}
.pagination a {color: black;float: left;padding: 8px 16px;text-decoration: none;transition: background-color .3s;
}
.pagination a.active {background-color: #4CAF50;color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
.footer {padding: 20px;text-align: left;background: #F0FFFF;margin-top: 20px;border-radius: 9px;font-size: 28px;color:  #008080;
}
.f1 :hover {top:10px;
}
.banquan {padding: 7px;text-align: center;background: rgba(173,216,230, 0.5);margin-top: 20px;font-size: 15px;
}
.banquan a {text-decoration: none;color:    #008080;
}
.tool {float: right;position: relative;display: inline-block;border-bottom: 1px dotted black;font-size: 20px;
}
.tool .tooltext {visibility: hidden;width: 120px;background-color: #F5F5DC;color: black;text-align: center;padding: 5px 0;border-radius: 25px;font-size: 10px;/* 定位工具提示 */position: absolute;z-index: 1;top: 5px;right: 105%;
}
.tool:hover .tooltext {visibility: visible;
}
.slidenav {position: fixed;top: 200px;right: 0;width: 90px;height:300px;text-align:center;border-radius: 25px 0 0 25px;background-color: rgba(255,255,255, 0.3);
}
.slidenav a{text-decoration: none;
}
.slidenav a:hover {color: blue;
}

HTML代码

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--头部-->
<div class="header"><a href="#"><img class="logo" src="D:\image\logo.png" alt="LOGO"></a><div class="biaoti1"><h1>Fabrics</h1><br /><p>Home Textile</p></div><div class="relation"><a href="#"><img src="D:\image\login.png" width="50" height="50"><div>log in</div></a><a href="#"><img src="D:\image\signin.png" width="50" height="50"><div>sign in</div></a></div>
</div>
<!--导航栏-->
<div class="topnav"><ul><li><a href="#">Home</a></li><li><a href="#">Work</a></li><li><a href="#">News</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li><div class="menu"><li><a class="menubtn" href="#">Menu</a></li><ul class="menu-content"><li><a href="#">1111</a></li><li><a href="#">2222</a></li><li><a href="#">3333</a></li></ul></div></ul>
</div>
<!--主内容1-->
<div class="row"><div class="content"><h2>Product</h2><p>Some text..</p></div><div class="content-main"><h2>New Product</h2><p>Some text..</p></div><div class="content"><h2>Product</h2><p>Some text..</p></div>
</div>
<!--主内容2-->
<div class="biaoti2"><h2>Category</h2>
</div>
<div class="row2"><!--左框--><div class="leftcolumn"><div class="card"><div class="card-hp"><h2>high accuracy</h2><h4>door curtain made of cloth</h4><h4>sheer curtain</h4>     <p>Some introduction...</p><p>Some introduction...</p></div><div class="card-img"><img src="D:\image\1.png" alt="1" width="300" height="300"></div></div><div class="card"><div class="card-hp"><h2>pashm</h2><h4>door curtain made of cloth</h4><h4>sheer curtain</h4><p>Some introduction...</p><p>Some introduction...</p></div><div class="card-img"><img src="D:\image\2.png" alt="2" width="300" height="300"></div></div></div><!--右框--><div class="rightcolumn"><div class="card"><h2>123</h2><p>Some text..</p></div><div class="card"><h2>123</h2><div class="card-img-right"><img src="D:\image\3.png" alt="3" width="300" height="300"></div></div><div class="card"><h2>123</h2><p>Some text..</p></div></div>
</div>
<!--主内容3-->
<div class="biaoti2"><h2>Picture</h2>
</div>
<div class="row2">
<div class="chuanglian"><img src="D:\image\1.png" alt="1" ><div class="text">1号</div>
</div>
<div class="chuanglian"><img src="D:\image\2.png" alt="2" ><div class="text">2号</div>
</div>
<div class="chuanglian"><img src="D:\image\3.png" alt="3" ><div class="text">3号</div>
</div>
</div>
<!--分页-->
<div class="center"><div class="pagination"><a href="#">«</a><a href="#" class="active">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">»</a></div>
</div>
<!--底部-->
<div class="footer"><div><h2>Footer</h2></div><div class="row"><div class="tool">联系方式<span class="tooltext">Tooltext</span></div></div>
</div>
<!--悬浮列表-->
<div class="slidenav"><div class="slidecontact"><a href="#"><img src="D:\image\top.png" width="70" height="70"><div>top</div></a></div><div class="slidecontact"><a href="#"><img src="D:\image\shopping.png"width="70" height="70"><div>shopping</div></a></div><div class="slidecontact"><a href="#"><img src="D:\image\relation.png"width="70" height="70"><div>relation</div></a></div>
</div>
<!--版权-->
<div class="banquan"><a href="#">banquan</a>
</div>
</body>
</html>

使用HTML+CSS制作一个简单的网页相关推荐

【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页
python+flask+html+css制作一个简单的生日祝福语网页一个py文件: test.py 一个html文件: birthday_index.html 一张图片: ...
教你快速制作一个简单的网页
像下面这样一个简单的网页怎么制作呢? 通过这篇文章,可以让你基本掌握一个HTML的结构和常用标签的使用需要用到的常用标签 <b> 加粗</b> ~~~~~~~~~~~~~~~ ...
使用Dreamweaver/利用HTML5/CSS/制作一个简单的文字logo
一.制作一个简单的logo 1. 结构与样式分析首先我们根据logo的图片分析logo的效果,该logo由6个字母组成.在使用"数码测色计"测出logo的颜色,这里我们测出log ...
HTML+CSS写一个简单的网页界面
学习了HTML和CSS入门的基本命令后,写出来一个简单的登录网页界面,可以跳转.登录. 主界面代码(log.html) <!DOCTYPE html> <html><he ...
基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码学生个人html静态网页制作成品代码
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
用DIV+CSS技术制作一个简单的网页我的家乡主题
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码学生个人html静态网页制作成品代码...
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
使用H5中的表单标签制作一个简单的网页登陆页面
简单介绍H5当中的表单标签.<form></form>表示定义一个表单的开始和结束.在form标签中,有主要的三个属性,action表示声明表单中的数据的处理的url地址.me ...
如何制作一个简单的网页
先创建一个文本文档,将后缀名改为"html" 然后右击这个,选择打开方式,用记事本打开开头与结尾要用<html>来写,后一个要加"/" 头部用he ...

使用HTML+CSS制作一个简单的网页

使用HTML+CSS制作一个简单的网页相关推荐

最新文章

热门文章