5页基于HTML家乡主题网页项目的设计与实现——上海介绍 HTML+CSS _html代码

? 【作者主页——获取更多优质源码】
? 【web前端期末大作业——毕设项目精品实战案例(1000套)】
文章目录三、个人总结四、更多干货
一、网页介绍
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：、、、、、Text 、++ 等任意html编辑软件进行运行及修改编辑等操作）。
3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。
一、网页效果

文章插图
2.CSS样式代码

@charset "utf-8";*{ margin:0; padding:0;}a{ text-decoration:none;}li{list-style-type:none;}body{ background:url(../images/body_bg.jpg) top center; background-attachment:fixed;font-size:14px;font-family:arial;}/*头部*/.head{width:1100px; height:60px; padding-top:10px; margin:auto;background-color:rgba(255,255,255,0.8);}.head .logo{float:left;}.head .logo img{height:70px;display:block;margin-right:20px;margin-left:20px;}.nav{width:1100px;height: 70px;margin: auto;background: #000;}.nav li{ float:left;margin-left:30px;}.nav li a{font-size:20px; color:#ddd; line-height:70px; }.nav li a:hover{ color:#fbf302; text-decoration:none;}/*中间内容*/.main{width:1000px;padding:50px;overflow:hidden;margin:auto; background-color:rgba(255,255,255,0.8);}.main_left{width:200px; height:auto; float:left;}.main_left .pic{width:190px;border:5px solid #000;}.main_left .pic img{width:190px;display:block;}.main_left .search{ width:200px;height:34px;margin-top:30px;}.main_left .search .btn{width:34px;height:34px;border:none;background:url(../images/search_btn.png);cursor:pointer;float:left;outline:none;}.main_left .search .text{display:block;width:160px;height:34px;border:none;font-size:14px;color:#333;float:left;margin-left:6px;outline:none;}.left_nav{width:160px; height:auto; margin-top:30px;}.left_nav li{ background:url(../images/d1.png) left center no-repeat;padding-left:30px;line-height:30px;}.left_nav li a{font-size:16px; color:#666; }.left_nav li a:hover{color:#000;}.main_right{width:760px; height:auto; float:left;margin-left:40px;} .main_right h2{font-size:22px; color:#333; line-height:36px;text-align:center;}.main_right .jianjie img{width:100%;}.main_right .jianjie p{font-size:16px; color:#666; line-height:2;text-indent:32px;}/*底部*/.foot{width:1100px; padding-top:20px;padding-bottom:20px; margin:auto; background:#000;clear:both;}.foot p{font-size:16px;color:#fff; line-height:24px; text-align:center;}/*景点介绍*/.jingdian li{height:150px;padding:15px 0;border-bottom:1px dashed #999;}.jingdian li img{width:200px;height:150px;float:left;margin-right:20px;}.jingdian li h3{margin-bottom:10px;}/*风景欣赏*/.fengjing img{display:block;width:360px;height:240px;float:left;margin:10px;}/*美食推荐*/.meishi{width:720px;margin:auto;}.meishi li{width:220px;float:left;margin:10px;}.meishi li img{width:220px;height:220px;}.meishi li p{text-align:center;}/*留言*/.liuyan{width:500px;margin:auto;}.liuyan p{line-height:30px;overflow:hidden;margin-top:20px;}.liuyan p span{display:block;width:100px;text-align:right;float:left;}.liuyan p input{display:block;width:400px;height:30px;border:none;float:left;}.liuyan p textarea{display:block;width:400px;height:200px;border:none;float:left;}.liuyan .btn{display:block;width:100px;height:30px;float:left;border:none;background:#000;color:#fff;margin-top:30px;margin-left:100px;cursor:pointer;}.liuyan .btn:hover{background:#f00;}

三、个人总结
一套合格的网页应该包含(具体可根据个人要求而定)

5页 基于HTML家乡主题网页项目的设计与实现——上海介绍 HTML+CSS

5页基于HTML家乡主题网页项目的设计与实现——上海介绍 HTML+CSS