・
.
・
・
・
・
Infini Studio (映纷创意)是一家创意设计机构，专注于品质型动画影像的创意与设计。我们使用设计、动画、特效及多种创新形式（Motion Graphic），将信息与内容进行动态视觉化创意呈现。并由动画导演、设计师、插画师、三维艺术家共同协作完成。服务的范围包括广告、影视、交互、新媒体等。
登入後複製
2016.3.15第一个网站首页第七天_html/css_WEB-ITnose
个人博客地址：http://blog.csdn.net/mr_lp里面有专栏，专门介绍从零基础，如何一步步学习 H5。
二维码.jpg
关注.gif
阶段测试--映纷创意首页
今日制作一个网站首页。
官网地址：http://www.infinistudio.cn/
今日制作效果图：
主页.png
今日制作网站逻辑概念：
屏幕快照 2016-03-15 14.15.21.png
既然已经分析过了界面要求和逻辑，那么我们来开始制作第一个页面。
首先是通过 Photoshop 去获取咱们网站的具体图标等。
在之后，分别去创建对应的文件夹，内部包含你的 CSS ， images 等文件夹。
创建之后，咱们正式开始今天的代码部分。
警告：以下代码部分，标签内容对应闭合，如果需要复制，请前往文章最底部。
首先咱们先来引入咱们的外部样式表。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/layout.css"> </head> <body> </body></html>
登入後複製
头部
之后咱们来去在 BODY 中创建咱们的首页 logo 还有四个按钮。为了方便查看，header 部分的 CSS 样式表，会在 header 部分结束的时候统一贴出来，大家稍安勿躁。
<div class="header"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/title2.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <ul> <li><a href="#">HOME</a></li> <li><a href="#">WORK</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">JOIN US</a></li> </ul> </div>
登入後複製
Header部分 CSS 代码
/*首先来设置整个界面的文字样式，清除边距*/*{ margin: 0px; font-size: 17px; font-family: "黑体";}/*为整个代码区域附上一个灰色的背景色*/body{ background-color: rgb(242 , 242, 242);}/*===========================================================*//* 头部 *//*===========================================================*/.header{ width: 100%; height: 113px; background-color: rgba(0, 0, 0, 0.5); /*元素框从文档流完全删除，并相对于其包含块定位。 包含块可能是文档中的另一个元素或者是初始包含块。 元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。 元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 不过其包含块是视窗本身.*/ position: fixed; /*设置图片居中*/ text-align: center; /*设置阴影效果 属性分别对应 ： 横向距离 竖向距离 阴影距离 阴影颜色*/ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);}/*调整头部 logo 尺寸*/.header img{ margin: 15px; width: 140px; height: 55px;}ul{ list-style-type: none;}ul a{ /*text-decoration: underline; 下滑线*/ /*text-decoration: line-through; 删除线*/ /*取消a的下滑线*/ text-decoration: none;}a{ color: rgba(255, 255, 255, 0.5);}/*伪类代码 a:hover 当我们的鼠标放在我们的 a 标签上，咱们可以去设置颜色或者大小等*/a:hover{ color: white;}li{ /* display 属性规定元素应该生成的框的类型:默认inline。此元素会被显示为内联元素，元素前后没有换行符。*/ display: inline; /*设置边距 属性为两个的时候，第一个属性设置上下高度 第二个属性设置左右宽度*/ margin: 0px 30px; padding:0px 20px;}登入後複製
主体
创建了上方的用户 logo 和四个按钮，咱们接下来要开始制作咱们的主体部分了，主体首先是一个用户引导图，下面配上文字和内容，下方还有对应的点。首先咱们来创建咱们的引导图
<div class="content"> - <div class="content_top"> <div class="content_banner"> <a href="#" class="img_bannder"><img class="img_bannder lazy" src="/static/imghw/default1.png" data-src="images/banner.jpg" alt="" /></a> <p class="banner_title_bg"> 优酷2014全视频之夜 </p> <div class="xiaodiandian"> <p class="dian"> ・ </p> <p class="dian"> . </p> <p class="dian"> ・ </p> <p class="dian"> ・ </p> <p class="dian"> ・ </p> <p class="dian"> ・ </p> </div> </div> <div class="content_introduce"> <p class="line"></p> <p class="introduce"> Infini Studio (映纷创意)是一家创意设计机构，专注于品质型动画影像的创意与设计。我们使用设计、动画、特效及多种创新形式（Motion Graphic），将信息与内容进行动态视觉化创意呈现。并由动画导演、设计师、插画师、三维艺术家共同协作完成。服务的范围包括广告、影视、交互、新媒体等。</p> </div> </div></div>
登入後複製
创建了引导图之后，还需要创建下方的赞助商图标。
<div class="content_company"> <p class="line"></p> <div class="company_logo"> <img src="/static/imghw/default1.png" data-src="images/1.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/2.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/3.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/4.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/5.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/6.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/7.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/8.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/9.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/10.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/11.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/12.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/13.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/14.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > </div> </div>
登入後複製
咱们的小界面部分。
<div class="content_bottom"> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news1.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>吴亦凡 -- 器官的纷争</p> </div> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news2.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>联想企业业务</p> </div> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news3.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>ME</p> </div> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news4.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>聚划算《世界聚在眼前》</p> </div> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news5.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>头条号</p> </div> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news1.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>吴亦凡 -- 器官的纷争</p> </div> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news2.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>联想企业业务</p> </div> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news3.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>ME</p> </div> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news4.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>聚划算《世界聚在眼前》</p> </div> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news5.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>头条号</p> </div> </div> </div>
登入後複製
CSS代码
/*===========================================================*//* 内容区域 *//*===========================================================*/.content{ width: 70%; height: 1620px; margin: auto;}/*banner、公司介绍、合作企业*//*设置具体图片距离顶部标题栏的距离*/.content_top{ width: 100%; height: 690px; margin-top: 130px;}/*横幅*/.content_banner{ width: 100%; height: 490px;}/*设置标题栏下 图片的 尺寸*/.content_banner .img_bannder{ width: 100%; height: 420px; /*position: relative;*/}/*设置提示语大小颜色*/.banner_title_bg{ margin-top: -3px; text-align: center; background-color: rgba(0, 0, 0, 0.5); color: white; padding: 5px 0px;}.xiaodiandian{ margin-top: 10px; text-align: center;}.dian{ display: inline;}/*公司介绍*//*设置公司介绍所占得位置大小*/.content_introduce{ width: 100%; height: 80px;}.line{ margin: 0px 10px; background-color: gray; height: 1px; /*透明Opacity：调整元素透明度；*/ opacity: 0.1;}/*设置介绍文字的样式*/.introduce{ padding: 10px; font-size: 13px; color: darkgray; line-height: normal;}/*合作企业底部图片大小*/.content_company{ width: 100%; height: 100px;}div.company_logo{ text-align: center;}div.company_logo img{ width: 60px; height: 38px; /*需要注意：当设置属性为四个时， 属性分别对应 上 右 下 左 */ padding: 10px 10px 0px 10px;}/*===========================================================*//* 视频展示 *//*===========================================================*//*首先设置每一个视频图片居中*/.content_bottom{ width: 100%; height: 830px; text-align: center;}/*接下来来规定一下图片的位置尺寸*/.news_item{ /*这里设置 28% 主要是因为想一行 放入三列 28% * 3 = 84% 具体看实际情况而定*/ width: 28%; height: 150px; float: left; text-align: center; margin: 20px; background-color: white; /*设置圆角 3 px 像素*/ border-radius: 3px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);}/*设置背景图片*/.news_item img{ width: 100%; height: 78%; border-radius: 3px;}/*设置图片文字*/.news_item p{ text-align: center; padding: 5px; color: rgba(0, 0, 0, 0.5);}/*设置鼠标放上去，透明度降低*/a:hover{ opacity: 0.5;}登入後複製
这时候应该就已经设置完主体和头部了，那我们离完成也就不远了。我们继续来设置我们的文章结尾。
<div class="footer"> <table> <tr> <td class="one"> <img src="/static/imghw/default1.png" data-src="images/contact1.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/contact2.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/contact3.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > </td> <td class="two"> <p class="vertical_line"></p> </td> <td class="three"> <img class="footer_logo lazy" src="/static/imghw/default1.png" data-src="images/footer_logo.jpg" / alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <p>Infini Studio | 映纷创意</p> <p>北京市朝阳北路107号院</p> <p>Email:infinistudio@foxmail.com</p> <p>QQ:7585917</p> <p>weibo:@InfiniStudio</p> </td> </tr> </table> </div>
登入後複製
CSS 代码部分
/*===========================================================*//* 尾部 *//*===========================================================*//*设置尾部距离*/.footer{ width: 100%; height: 215px; background-color: rgb(224, 224, 224); margin-bottom: 40px;}/*更改尾部图片大小*/.footer img{ width: 36px; height: 30px; margin-top: 5px;}/*更改文字大小*/.footer p{ color: gray; padding: 3px 0px; font-size: 15px;}table{ width: 100%;}td.one{ width: 48%; text-align: right; /*设置元素的垂直对齐方式*/ vertical-align: top;}td.two{ width: 1%; text-align: center; height: 100%;}.vertical_line{ margin-top: 5px; height: 195px; width: 1px; background-color: gray; opacity: 0.2;}td.three{ width: 48%; text-align: left;}img.footer_logo{ margin-top: -10px; width: 145px; height: 60px;}登入後複製
这时候，咱们的界面首页就基本完成了，但是还是有非常多的功能需要优化，但是咱们现在所学习的水平有限，等咱们技术好一点了，我会带着大家，用更高级的方式，从新制作一次这个界面。欢迎大家留言挖坟。
今天就到这里，欢迎大家跟着我，每天10分钟，一起学习 H5.
HTML 代码：
<div class="header"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/title2.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <ul> <li><a href="#">HOME</a></li> <li><a href="#">WORK</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">JOIN US</a></li> </ul> </div> -<div class="content_bottom"> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news1.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>吴亦凡 -- 器官的纷争</p> </div> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news2.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>联想企业业务</p> </div> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news3.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>ME</p> </div> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news4.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>聚划算《世界聚在眼前》</p> </div> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news5.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>头条号</p> </div> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news1.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>吴亦凡 -- 器官的纷争</p> </div> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news2.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>联想企业业务</p> </div> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news3.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>ME</p> </div> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news4.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>聚划算《世界聚在眼前》</p> </div> <div class="news_item"> <a href="#"><img src="/static/imghw/default1.png" data-src="images/news5.png" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" ></a> <p>头条号</p> </div> </div> </div> <div class="footer"> <table> <tr> <td class="one"> <img src="/static/imghw/default1.png" data-src="images/contact1.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/contact2.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/contact3.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > </td> <td class="two"> <p class="vertical_line"></p> </td> <td class="three"> <img class="footer_logo lazy" src="/static/imghw/default1.png" data-src="images/footer_logo.jpg" / alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <p>Infini Studio | 映纷创意</p> <p>北京市朝阳北路107号院</p> <p>Email:infinistudio@foxmail.com</p> <p>QQ:7585917</p> <p>weibo:@InfiniStudio</p> </td> </tr> </table> </div>
<div class="content_company"> <p class="line"></p> <div class="company_logo"> <img src="/static/imghw/default1.png" data-src="images/1.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/2.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/3.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/4.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/5.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/6.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/7.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/8.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/9.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/10.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/11.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/12.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/13.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="images/14.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > </div> </div>CSS 代码：
/*首先来设置整个界面的文字样式，清除边距*/*{ margin: 0px; font-size: 17px; font-family: "黑体";}/*为整个代码区域附上一个灰色的背景色*/body{ background-color: rgb(242 , 242, 242);}/*===========================================================*//* 头部 *//*===========================================================*/.header{ width: 100%; height: 113px; background-color: rgba(0, 0, 0, 0.5); /*元素框从文档流完全删除，并相对于其包含块定位。 包含块可能是文档中的另一个元素或者是初始包含块。 元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。 元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 不过其包含块是视窗本身.*/ position: fixed; /*设置图片居中*/ text-align: center; /*设置阴影效果 属性分别对应 ： 横向距离 竖向距离 阴影距离 阴影颜色*/ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);}/*调整头部 logo 尺寸*/.header img{ margin: 15px; width: 140px; height: 55px;}ul{ list-style-type: none;}ul a{ /*text-decoration: underline; 下滑线*/ /*text-decoration: line-through; 删除线*/ /*取消a的下滑线*/ text-decoration: none;}a{ color: rgba(255, 255, 255, 0.5);}/*伪类代码 a:hover 当我们的鼠标放在我们的 a 标签上，咱们可以去设置颜色或者大小等*/a:hover{ color: white;}li{ /* display 属性规定元素应该生成的框的类型:默认inline。此元素会被显示为内联元素，元素前后没有换行符。*/ display: inline; /*设置边距 属性为两个的时候，第一个属性设置上下高度 第二个属性设置左右宽度*/ margin: 0px 30px; padding:0px 20px;}/*===========================================================*//* 内容区域 *//*===========================================================*/.content{ width: 70%; height: 1620px; margin: auto;}/*banner、公司介绍、合作企业*//*设置具体图片距离顶部标题栏的距离*/.content_top{ width: 100%; height: 690px; margin-top: 130px;}/*横幅*/.content_banner{ width: 100%; height: 490px;}/*设置标题栏下 图片的 尺寸*/.content_banner .img_bannder{ width: 100%; height: 420px; /*position: relative;*/}/*设置提示语大小颜色*/.banner_title_bg{ margin-top: -3px; text-align: center; background-color: rgba(0, 0, 0, 0.5); color: white; padding: 5px 0px;}.xiaodiandian{ margin-top: 10px; text-align: center;}.dian{ display: inline;}/*公司介绍*//*设置公司介绍所占得位置大小*/.content_introduce{ width: 100%; height: 80px;}.line{ margin: 0px 10px; background-color: gray; height: 1px; /*透明Opacity：调整元素透明度；*/ opacity: 0.1;}/*设置介绍文字的样式*/.introduce{ padding: 10px; font-size: 13px; color: darkgray; line-height: normal;}/*合作企业底部图片大小*/.content_company{ width: 100%; height: 100px;}div.company_logo{ text-align: center;}div.company_logo img{ width: 60px; height: 38px; /*需要注意：当设置属性为四个时， 属性分别对应 上 右 下 左 */ padding: 10px 10px 0px 10px;}/*===========================================================*//* 视频展示 *//*===========================================================*//*首先设置每一个视频图片居中*/.content_bottom{ width: 100%; height: 830px; text-align: center;}/*接下来来规定一下图片的位置尺寸*/.news_item{ /*这里设置 28% 主要是因为想一行 放入三列 28% * 3 = 84% 具体看实际情况而定*/ width: 28%; height: 150px; float: left; text-align: center; margin: 20px; background-color: white; /*设置圆角 3 px 像素*/ border-radius: 3px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);}/*设置背景图片*/.news_item img{ width: 100%; height: 78%; border-radius: 3px;}/*设置图片文字*/.news_item p{ text-align: center; padding: 5px; color: rgba(0, 0, 0, 0.5);}/*设置鼠标放上去，透明度降低*/a:hover{ opacity: 0.5;}/*===========================================================*//* 尾部 *//*===========================================================*//*设置尾部距离*/.footer{ width: 100%; height: 215px; background-color: rgb(224, 224, 224); margin-bottom: 40px;}/*更改尾部图片大小*/.footer img{ width: 36px; height: 30px; margin-top: 5px;}/*更改文字大小*/.footer p{ color: gray; padding: 3px 0px; font-size: 15px;}table{ width: 100%;}td.one{ width: 48%; text-align: right; /*设置元素的垂直对齐方式*/ vertical-align: top;}td.two{ width: 1%; text-align: center; height: 100%;}.vertical_line{ margin-top: 5px; height: 195px; width: 1px; background-color: gray; opacity: 0.2;}td.three{ width: 48%; text-align: left;}img.footer_logo{ margin-top: -10px; width: 145px; height: 60px;}登入後複製
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
刺客信條陰影：貝殼謎語解決方案
1 個月前
By DDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前
By DDD
在哪裡可以找到原子中的起重機控制鑰匙卡
1 個月前
By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前
By DDD
Inzoi：如何申請學校和大學
3 週前
By DDD
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
HTML容易為初學者學習嗎？
Apr 07, 2025 am 12:11 AM
HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。
HTML，CSS和JavaScript的角色：核心職責
Apr 08, 2025 pm 07:05 PM
HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML中起始標籤的示例是什麼？
Apr 06, 2025 am 12:04 AM
AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
Gitee Pages靜態網站部署失敗：單個文件404錯誤如何排查和解決？
Apr 04, 2025 pm 11:54 PM
GiteePages靜態網站部署失敗：404錯誤排查與解決在使用Gitee...
如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果？
Apr 05, 2025 am 06:15 AM
實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中，需要實現一種交互效果：點擊某張圖片，使其周圍的...
網頁批註如何實現Y軸位置的自適應佈局？
Apr 04, 2025 pm 11:30 PM
網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能，特別是如何處理批註之間的間�...
HTML，CSS和JavaScript：Web開發人員的基本工具
Apr 09, 2025 am 12:12 AM
HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。
