day03：静态网页的练习

今天通过跟学做某网站的首页，主要学习其静态网页的制作，巩固往日所学知识。

“不就几个div嘛有嘛了不起的！”

此次练习对margin的运用 border的利用 float浮动和清楚浮动有了更深的认识，之前听知识只是当时听懂了然而在自己亲身独自动手的时候遇到很多问题。标签属性记不清，虽然见了知道，但是不见想不起来。这就是没有理论结合实际的具体表现。

通过此次练习，让我对web有了一定认识，让自己拥有了足够的勇气，只要塌下心来慢慢来,

静静想想，一切都是小问题。对！一定要先主要排版布局，可以先使用border进行简单轮廓的构造，然后再往里面填东西。把他们看成一个板块一个板块，解决的方法不止一种，甚至你可以使用最基础的知识来解决他们，需要你不断锻炼自己的空间能力，拥有足够好的空间想象力，web很简单。

世上无难事，只怕有心人。加油！！！

（附上本次练习代码）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="css/index.css"><title>Title</title>
</head>
<body>
<div class="main"><!-- 顶部导航栏 --><div class="top"><div class="left"><img src="img/a.png" alt=""></div><div class="right"><span>首页</span><span>招投标</span><span>机械加盟</span><span>行业资讯</span><span>关于我们</span></div></div><!-- 歌剧院照片 --><div class="photo"><div><img src="img/k.png" alt=""></div></div><!-- 最新招标 --><div class="title"><h2>最新招标</h2></div><!-- 招标介绍 --><div class="photo_1"><div class="one"><div><img src="img/j.png" alt="" style="width: 420px; height: 300px;"></div><div class="page"><h3>关雎</h3><p>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</p><p>参差荇菜，左右流之。窈窕淑女，寤寐求之。</p><p>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</p><p>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</p><p>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</p></div></div><div class="two"><div><img src="img/g.png" alt="" style="width: 420px; height: 300px;"></div><div class="page"><h3>关雎</h3><p>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</p><p>参差荇菜，左右流之。窈窕淑女，寤寐求之。</p><p>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</p><p>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</p><p>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</p></div></div><div class="three"><div><img src="img/f.png" alt="" style="width: 420px; height: 300px;"></div><div class="page"><h3>关雎</h3><p>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</p><p>参差荇菜，左右流之。窈窕淑女，寤寐求之。</p><p>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</p><p>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</p><p>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</p></div></div></div></div><!-- 招标titile --><div class="title_1"><div><h2>招标信息</h2></div></div><!-- 招标信息 --><div class="message"><div class="message_1"><div><img src="img/i.png" alt=""></div><div class="text"><h3>科技出手，功力双收</h3><p>李某闭目听箜篌，只因天下无敌手。</p><p>笔落才气惊星斗，龙骧凤翥势难收。</p><p>兴酣落笔摇五岳，诗成笑傲凌千秋。</p><p>满堂花醉七千客，一剑霜寒十九州。</p>
<!--                <p>鼓角揭天嘉气冷，风涛动地海山秋。</p>-->
<!--                <p>请君暂上滕王阁，若个书生镇国侯。</p>-->
<!--                <p>东南永作金天柱，谁羡当年万户侯。</p>-->
<!--                <p>李某不愿留姓名，恐压天下十九州。</p>--></div></div><div class="message_1"><div><img src="img/h.png" alt="" style="margin-top: 10px"></div><div class="text" ><h3>科技出手，功力双收</h3><p>李某闭目听箜篌，只因天下无敌手。</p><p>笔落才气惊星斗，龙骧凤翥势难收。</p><p>兴酣落笔摇五岳，诗成笑傲凌千秋。</p><p>满堂花醉七千客，一剑霜寒十九州。</p></div></div><div class="message_1"><div><img src="img/d.png" alt=""></div><div class="text" ><h3>科技出手，功力双收</h3><p>李某闭目听箜篌，只因天下无敌手。</p><p>笔落才气惊星斗，龙骧凤翥势难收。</p><p>兴酣落笔摇五岳，诗成笑傲凌千秋。</p><p>满堂花醉七千客，一剑霜寒十九州。</p></div></div><div class="message_1"><div><img src="img/c.png" alt=""></div><div class="text" ><h3>科技出手，功力双收</h3><p>李某闭目听箜篌，只因天下无敌手。</p><p>笔落才气惊星斗，龙骧凤翥势难收。</p><p>兴酣落笔摇五岳，诗成笑傲凌千秋。</p><p>满堂花醉七千客，一剑霜寒十九州。</p></div></div></div><!--中标告示--><div class="title_2"><h2>中标告示</h2><div class="photo_2"><img src="img/hover5.png" alt=""></div></div><!--修饰--><div class="modify"><div class="left_2"></div><div class="mid_2"></div><div class="bottom_2"></div></div><!--底部--><div class="bottom"><div class="left_1"><img src="img/logo.png" alt=""></div><div class="mid" ><div style="text-align: center;color: white;margin-top: 35px"><span>工程客户端&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span><span>机械客户端</span></div><div class="download"><div class="download_1"><p style="text-align: center;color: white;margin-top: 5px">Appstore下载</p></div><div class="download_1"><p style="text-align: center;color: white;margin-top: 5px">Appstore下载</p></div><div class="download_1"><p style="text-align: center;color: white;margin-top: 5px">Android下载</p></div><div class="download_1"><p style="text-align: center;color: white;margin-top: 5px">Android下载</p></div></div></div><div class="right_1"><div class="photo_3"><img src="img/b.png" alt=""></div></div></div><!--备案--><div class="safe"><p>Copyright © 2015-2020 轰隆隆honglonglong. All Rights Reserved.</p><p>京ICP备20002211号</p></div></div>
</body>
</html>

body{margin: 0;
}/* 1354 88 */.main .top{min-width: 1388px;background-color: #324880;height: 88px;overflow: hidden;
}.top .left{width: 50%;float: left;margin-top: 20px;
}
.top .right{margin-top: 35px;
}
.top .right span{color: white;margin-left: 80px;
}.main .top img{width: 177px;height: 51px;margin-left: 175px;margin-bottom: 30px;
}/*.photo div {height: 360px;background-image: url("../img/k.png");background-size: cover;background-position: center center;
}*/
.photo img{width: 100%;height: 360px;
}.title{margin: 0;text-align: center;
}.photo_1{margin: 0 auto;/*text-align: center;*/width: 1100px;height: 960px;
}.one{width: 1100px;height: 300px;margin-bottom: 10px;border-radius: 15px;background-color: #f3f7fb;border: 1px solid black;
}.two{width: 1100px;height: 300px;margin-bottom: 10px;border-radius: 15px;background-color: #f3f7fb;border: 1px solid black;
}
.three{width: 1100px;height: 300px;border-radius: 15px;background-color: #f3f7fb;border: 1px solid black;
}.photo_1 .one img{border-radius: 15px;float: left;margin-bottom: 30px;
}
.photo_1 .two img{border-radius: 15px;float: right;
}
.photo_1 .three img{border-radius: 15px;float: left;
}.one .page{margin-left: 30px;width: 600px;float: right;line-height: 15px;font-size: 28px;
}.two .page{margin-left: 30px;width: 600px;float: left;line-height: 15px;font-size: 28px;
}.three .page{margin-left: 30px;width: 600px;float: right;line-height: 15px;font-size: 28px;
}.title_1{text-align: center;
}.message {margin: 0 auto;width: 1200px;height: 550px;overflow: hidden;
}.message .message_1{float: left;width: 600px;height: 250px;
}.message .message_1 img{float: left;margin-bottom: 30px;
}.message_1 .text{width: 350px;height: 250px;margin-top: 20px;margin-left: 20px;line-height: 20px;font-size: 20px;float: right;
}.title_2{text-align: center;margin-bottom: 35px;
}.title_2 .photo_2{width: 1300px;height: 430px;margin: 0 auto;
}.title_2 .photo_2 img{width: 1300px;height: 430px;
}.bottom{background-color: #233059;height: 210px;overflow: hidden;
}
.bottom .left_1{width: 320px;height: 210px;float: left;
}.bottom .mid{width: 520px;height: 210px;border: 1px solid #233059;float: left;
}.modify {height: 40px;overflow: hidden;
}.modify .left_2{width: 950px;height: 40px;float: left;background-color: white;
}.modify .mid_2{height: 40px;float: left;width: 40px;border-left: 40px solid white;border-right: 40px solid #171e2E;border-top: 40px solid white;border-bottom: 40px solid #171e2E;
}.modify .bottom_2{height: 40px;float: left;width: 213px;background-color: #171e2E;
}.bottom .left_1 img{width: 145px;height: 45px;margin-left: 170px;margin-top: 85px;
}.download{width: 380px;height: 100%;float: left;margin-left: 100px;margin-top: 25px;
}.download .download_1{width: 150px;height: 40px;margin-bottom: 22px;margin-right: 30px;border: 1px solid white;float: left;
}.right_1 {width: 210px;height: 160px;float: left;margin-left: 230px;background-color: #171e2E;
}.right_1 .photo_3 img{margin-left: 50px;
}.safe{margin: 0;background-color: #171e2E;text-align: center;color: #575c67;border: 5px solid #171e2E;
}.safe p{text-align: center;
}

day03：静态网页的练习相关推荐

只需三分钟您就可以用nodejs搭建静态网页服务器（配置静态网页访问目录）
Node.js 中文网Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...
AWS攻略——使用CodeBuild进行自动化构建和部署静态网页
首先声明下,使用"CodeBuild"部署并不是"正统"的方案,因为AWS提供了"CodeDeploy".如果不希望引入太多基础设施,可以考 ...
AWS攻略——使用S3托管静态网页
在AWS上有很多部署静态网页的方式,比如使用EC2或者Lightsail.但是不管使用上述哪种方案,都需要预先部署如Nignx或者Apache等Http服务.这对纯前端同学来说可能有点复杂,而AWS提 ...
静态网页案例_手把手教你构建网页
网页网页是构成网站的基本元素,是承载各种网站应用的平台.通俗地说,您的网站就是由网页组成的,如果您只有域名和虚拟主机而没有制作任何网页的话,您的客户仍旧无法访问您的网站. 网页是一个包含HTML ...
python爬虫如何从一个页面进入另一个页面-Python爬虫（一）：爬取一个简单的静态网页...
版本:python3.7 平台:windows10 工具 :pycharm 断断续续学习了py3爬虫2周左右的时间,发现自己学习的过于零散化,所以想通过这个专栏系统的整理下自己所学过的知识.如有错误, ...
Freemarker入门小案例（生成静态网页的其中一种方式）
其实生成静态网页的方式有好多种,我昨天看了一下,Freemarker是其中一种,但是Freemarker现在我们都用得比较少了,现在用得ActiveMQ用来发送信息到静态页面,不过想了一下这个小东西, ...
静态网页制作html语言入门
编辑一个文本文件,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
gulp html 模块化,使用Gulp如何实现静态网页模块化具体怎么做？
众所周知Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.下面这篇文章主要给大家介绍了关于Gulp实现静态网页模块化的相关资料,文中通过示例代码介绍的非常详细,需 ...
nginx 部署静态网页
nginx 部署静态网页 2018年06月15日 17:55:23 幽默的荆轲君阅读数:477 nginx 部署静态网页第一步,就是安装nginx. 第二步配置nginx.conf 熟悉vim的 ...

day03：静态网页的练习

day03：静态网页的练习相关推荐

最新文章

热门文章