1学习内容

综合运用HTML、CSS知识制作静态网页。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>京吃食府</title><link rel="stylesheet" href="css/index.css  ">
</head>
<body><div class="header wrapper "><h1><a href="./index.html"><img src="resource/logo_0.png"> </a></h1><div class="nav"><ul><li><a href="./index.html">首页</a></li><li><a href="#">菜谱</a> </li><li><a href="#">本店介绍</a></li></ul></div><div class="search"><input type="text" placeholder="请输入关键字"><button></button></div><div class="user"><img src="resource/header.jpg"><span>rjj1125</span></div>
</div><div class="banner"><div class="wrapper"><div class="left"><ul><li><a href="#">北平风味<span>></span> </a></li><li><a href="#">川渝风味<span>></span> </a></li><li><a href="#">闽南风味<span>></span> </a></li><li><a href="#">西北风味<span>></span> </a></li></ul></div><div class="right"><h2>我的菜单</h2><div class="content"><dl><dt>北平风味</dt><dd>驴打滚</dd></dl><dl><dt>川渝风味</dt><dd>重庆小面</dd></dl><dl><dt>闽南风味</dt><dd>灌汤包</dd></dl></div><a href="#" class="more">全部菜单</a></div></div>
</div><div class="foods wrapper"><h2>美食推荐</h2><ul><li><a href="#">驴打滚</a> </li><li><a href="#">驴打滚</a> </li><li><a href="#">驴打滚</a> </li></ul><a href="#" class="change">修改美食</a>
</div><div class="showFood wrapper"><div class="title" ><h2>美食推荐</h2><img src="resource/logo_7.jpg"><a href="#">查看全部</a></div><div class="content cleafix"><ul><li><a href="#"><img src="resource/驴打滚.jpg"><h3>驴打滚</h3><p><img src="resource/logo_2.jpg"><span>火爆</span>  1125人已购买</p></a></li><li><a href="#"><img src="resource/驴打滚.jpg"><h3>驴打滚</h3><p><img src="resource/logo_2.jpg"><span>火爆</span>  1125人已购买</p></a></li><li><a href="#"><img src="resource/驴打滚.jpg"><h3>驴打滚</h3><p><img src="resource/logo_2.jpg"><span>火爆</span>  1125人已购买</p></a></li><li><a href="#"><img src="resource/驴打滚.jpg"><h3>驴打滚</h3><p><img src="resource/logo_2.jpg"><span>火爆</span>  1125人已购买</p></a></li><li><a href="#"><img src="resource/驴打滚.jpg"><h3>驴打滚</h3><p><img src="resource/logo_2.jpg"><span>火爆</span>  1125人已购买</p></a></li><li><a href="#"><img src="resource/驴打滚.jpg"><h3>驴打滚</h3><p><img src="resource/logo_2.jpg"><span>火爆</span>  1125人已购买</p></a></li><li><a href="#"><img src="resource/驴打滚.jpg"><h3>驴打滚</h3><p><img src="resource/logo_2.jpg"><span>火爆</span>  1125人已购买</p></a></li><li><a href="#"><img src="resource/驴打滚.jpg"><h3>驴打滚</h3><p><img src="resource/logo_2.jpg"><span>火爆</span>  1125人已购买</p></a></li><li><a href="#"><img src="resource/驴打滚.jpg"><h3>驴打滚</h3><p><img src="resource/logo_2.jpg"><span>火爆</span>  1125人已购买</p></a></li><li><a href="#"><img src="resource/驴打滚.jpg"><h3>驴打滚</h3><p><img src="resource/logo_2.jpg"><span>火爆</span>  1125人已购买</p></a></li></ul></div>
</div><div class="foot"><div class="wrapper"><div class="left"><img src="resource/logo.jpg"><p>京吃食府致力于让世人享受最地道的美味。<br>2022年RJJ inc.保留所有权利。</p></div><div class="right"><dl><dt>关于京吃</dt><dd><a href="#">了解京吃</a> </dd><dd><a href="#">加入京吃</a> </dd><dd><a href="#">廉洁举报</a> </dd></dl><dl><dt>帮助中心</dt><dd><a href="#">账户管理</a> </dd><dd><a href="#">购买指南</a> </dd><dd><a href="#">订单操作</a> </dd></dl><dl><dt>服务支持</dt><dd><a href="#">售后政策</a> </dd><dd><a href="#">自助服务</a> </dd><dd><a href="#">相关下载</a> </dd></dl><dl><dt>关注我们</dt><dd><a href="#">官方QQ</a> </dd><dd><a href="#">官方微信</a> </dd><dd><a href="#">联系我们</a> </dd><dd><a href="#">公益基金会</a> </dd></dl></div></div>
</div>
<div class="bottom">让全世界美食爱好者感受中华美食的魅力!
</div>
</body>
</html>

/*去除默认内外边距和防止添加盒子内外边距撑大盒子*/
*{margin: 0;padding: 0;box-sizing: border-box;
}/*去除列表开头标点*/
li{list-style: none;
}/*去除超链接下划线*/
a{text-decoration: none;
}/*双伪元素防止浮动错误和避免塌陷*/
.cleafix:before,
.cleafix:after{content: "";display: table;
}
.cleafix:after{clear: both;
}body{background-color: #f3f5f7;
}.wrapper{width: 1200px;margin: 0 auto;
}.header{height: 57px;margin: 30px auto;box-shadow: 0px 2px 3px 0pxrgba(118,118,118,0.2);
}h1{float: left;
}
.nav{float: left;margin-left: 70px;height: 57px;
}.nav li{float: left;margin-right: 26px;
}.nav li a{display: block;padding: 0 9px;height: 57px;line-height: 57px;font-size: 18px;color: black;
}
.nav li a:hover{border-bottom: 2px solid #808080;
}.search{float: left;margin-left: 59px;width: 452px;height: 52px;border: 1px solid #808080;
}
.search input{float: left;padding-left: 20px;width: 400px;height: 50px;border: 0;font-size: 18px;
}
.search input::placeholder{font-size: 16px;color: #bfbfbf;
}
.search button{float: left;width: 50px;height: 50px;background-image: url(../resource/search.jpg);border: 0;
}.user{float: right;margin-right: 50px;height: 50px;line-height: 57px;
}
.user img{/*调节图片垂直对齐方式,middle:居中*/vertical-align: middle;
}
.user span{color: #808080;
}
/*------------------------*/.banner{height: 420px;
}
.banner .wrapper{height: 420px;background-image: url(../resource/background_1.jpg);
}.banner .left{float: left;padding: 0 20px;width: 190px;height: 420px;background-color: rgba(0,0,0,0.3);/*line控制文字属性,可继承*/line-height: 105px;
}
.banner .left span{float: right;
}
.banner .left a{font-size: 20px;color: white;
}
.banner .left a:hover{color: black;
}.banner .right{float: right;margin-top: 50px;width: 200px;height: 300px;background-color: white;
}
.banner .right h2{height: 48px;background-color: grey;text-align: center;line-height: 48px;font-size: 18px;color: white;
}
.banner .right .content{padding: 0 18px;
}
.banner .right .content dl{padding: 12px 0;border-bottom: 2px solid grey;
}
.banner .right .content dt{font-size: 16px;color: black;
}
.banner .right .content dd{font-size: 14px;color: #4e4e4e;
}.banner .right .more{display: block;margin: 4px auto 0;width: 180px;height: 40px;border: 1px solid black;font-size: 16px;color: black;font-weight: 700;text-align: center;line-height: 40px;
}
/*---------------------*/.foods{margin-top: 10px;padding: 0 30px;height: 60px;background-color: white;box-shadow: 0px 2px 3px 0pxrgba(118,118,118,0.2);line-height: 60px;}.foods h2{float: left;font-size: 20px;color: grey;}.foods ul{float: left;margin-left: 30px;}.foods ul li{float: left;}.foods li a{border-left: 1px solid #bfbfbf;padding: 0 30px;color: black;}.foods .change{float: right;color: grey;font-weight: 700;}
/* -------------------------*/.showFood{margin-top: 25px;
}
.showFood .title{height: 80px;
}
.showFood .title h2{float: left;margin-top: 40px;font-size: 25px;color: black;font-weight:400;
}
.showFood .title img{padding-left: 385px;
}
.showFood .title a{float: right;margin-right: 30px;margin-top: 50px;font-size: 18px;color: #bfbfbf;
}.showFood .content li{float: left;margin-right: 15px;margin-top: 5px;width: 228px;height: 270px;background-color: white;box-shadow: 0px 2px 3px 0pxrgba(118,118,118,0.2);
}
.showFood .content li:nth-child(5n){margin-right: 0;
}.showFood .content li h3{padding: 20px 80px;font-size: 20px;font-weight: 400;color: #4e4e4e;
}
.showFood .content li p img{margin: -4px 1px;padding-top: 10px;
}
.showFood .content li p{padding: 0 30px;font-size: 14px;color: #bfbfbf;
}
.showFood .content li span{color: red;font-size: 16px;padding-right: 10px;
}
/*-----------------------------------*/
/*要清楚浮动的影响,内容类加入clearfix清除*/
.foot{margin-top: 40px;padding-top: 30px;height: 350px;background-color: white;
}
.foot .left{float: left;
}
.foot .left p {margin: 20px 0 15px;color: #808080;
}.foot .right{float: right;
}
.foot .right dl{float: left;margin-left: 120px;
}
.foot .right dt{font-size: 16px;margin-bottom: 40px;
}
.foot .right dd{padding: 10px;
}
.foot .right dd a{font-size: 14px;color: dimgrey;
}
.foot .right dd a:hover{padding-bottom: 5px;border-bottom: 1px solid #4e4e4e;color: #4e4e4e;
}.bottom {padding-left: 480px;padding-bottom: 50px;background-color: white;font: 700 25px 楷体;color: #bfbfbf;
}

2. 成果展示

前端学习——静态网页制作相关推荐

web前端简单静态网页制作
那么Web页面制作基础,能让你掌握什么呢? 1.掌握Web基础知识. 2.掌握HTML5基础知识. 3.掌握CSS基础知识. 网页设计源代码: <!DOCTYPE html> <ht ...
分析静态网页客户服务器工作过程,(静态网页制作课程标准.doc
静态网页制作课程标准课程编码: 02345 课程类别:专业基础必修课适用专业:计算机应用授课系(部):电子与信息系学分学时: 4 编写执笔人:宋昌统教研室主任审核签字: 审核日期: 系主任审 ...
Javaweb实验：静态网页制作
Javaweb实验: 1.静态网页制作目录 Javaweb实验: 前言一.实验目的二.实验原理三.实验内容四.实验步骤五.实验结果六.实验内容七.实验步骤八.实验结果九.思考 1. ...
大学生动漫网页设计模板机动战士高达静态网页制作成品下载 HTML漫画网页作业带JS轮播图
机动战士高达静态网页制作应用知识点作品介绍首页部分代码页面最终效果网页源地址应用知识点 DIV CSS布局.网页背景图.JS图片轮播.在线视频作品介绍机动战士高达动漫网页使用DIV C ...
利用html标记制作静态网页,使用HTML制作网页《静态网页制作》.ppt
使用HTML制作网页<静态网页制作> 表单的执行原理 Internet 1 2 客户端:请求登录,通过表单填写账户信息服务器端:验证发来的账号信息,然后给出反馈客户端和服务器类似两人沟 ...
静态网页制作教程（转载）
方法/步骤新建一个txt文本文档,先不要急着修改文件后缀名,有基础的朋友手动输入HTML代码,不会也没有关系,百度搜索"网页HTML代码". 代码: <!Doctype h ...
学习个人网页制作全过程
如何制作个人网页全过程,送给刚学做网页的朋友们第一讲网页的基本知识和FrontPage入门一.网页的基本知识 1.网站与网页我们在因特网上浏览时,看到的每一个页面,称为网页,很多网页组成一个网 ...
HTML前端静态网页制作
在制作网页之前,首先先分析网页是那些部分组成,可以从以下的代码看出,分为头部.导航栏.logo部分.文字部分等等这些组成.多的不说,直接上代码,本次静态网页代码分为html和css部分. <!D ...
手机端静态网页制作需要注意的几个问题
在手机端(移动端)进行静态网页的制作,主要考虑不同手机兼容性的问题,需要达到在不同类型的手机上,网页都能有一个良好的展示效果.为了达到这个效果,我们在写静态网页时需要注意几个问题. 1 viewpor ...
静态网页制作html语言入门
编辑一个文本文件,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

前端学习——静态网页制作

前端学习——静态网页制作

1学习内容

2. 成果展示

前端学习——静态网页制作相关推荐

最新文章

热门文章