cari
Rumahhujung hadapan webhtml tutorial2016.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/imghwm/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/imghwm/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/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/3.jpg"  class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/4.jpg"  class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/5.jpg"  class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/6.jpg"  class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/7.jpg"  class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/8.jpg"  class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/9.jpg"  class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/10.jpg"  class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/11.jpg"  class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/12.jpg"  class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/13.jpg"  class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/default1.png"  data-src="images/contact1.jpg"  class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/contact2.jpg"  class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/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/imghwm/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/imghwm/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>        
-

.

Infini Studio (映纷创意)是一家创意设计机构,专注于品质型动画影像的创意与设计。我们使用设计、动画、特效及多种创新形式(Motion Graphic),将信息与内容进行动态视觉化创意呈现。并由动画导演、设计师、插画师、三维艺术家共同协作完成。服务的范围包括广告、影视、交互、新媒体等。

<div class="content_company"> <p class="line"></p> <div class="company_logo"> <img src="/static/imghwm/default1.png" data-src="images/1.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghwm/default1.png" data-src="images/2.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghwm/default1.png" data-src="images/3.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghwm/default1.png" data-src="images/4.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghwm/default1.png" data-src="images/5.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghwm/default1.png" data-src="images/6.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghwm/default1.png" data-src="images/7.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghwm/default1.png" data-src="images/8.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghwm/default1.png" data-src="images/9.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghwm/default1.png" data-src="images/10.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghwm/default1.png" data-src="images/11.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghwm/default1.png" data-src="images/12.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghwm/default1.png" data-src="images/13.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/default1.png" data-src="images/contact1.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghwm/default1.png" data-src="images/contact2.jpg" class="lazy"/ alt="2016.3.15第一个网站首页第七天_html/css_WEB-ITnose" > <img src="/static/imghwm/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/imghwm/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 代码:

/*首先来设置整个界面的文字样式,清除边距*/*{  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;}
Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Apakah atribut Boolean dalam HTML? Beri beberapa contoh.Apakah atribut Boolean dalam HTML? Beri beberapa contoh.Apr 25, 2025 am 12:01 AM

Atribut Boolean adalah atribut khas dalam HTML yang diaktifkan tanpa nilai. 1. Atribut Boolean mengawal tingkah laku elemen dengan sama ada ia wujud atau tidak, seperti dilumpuhkan melumpuhkan kotak input. 2. Prinsip kerja mereka adalah untuk mengubah tingkah laku elemen mengikut kewujudan atribut apabila penyemak imbas. 3. Penggunaan asas adalah untuk menambah atribut secara langsung, dan penggunaan lanjutan dapat dikawal secara dinamik melalui JavaScript. 4. Kesalahan umum adalah tersilap berfikir bahawa nilai -nilai perlu ditetapkan, dan kaedah penulisan yang betul harus ringkas. 5. Amalan terbaik adalah untuk memastikan kod ringkas dan menggunakan sifat Boolean dengan munasabah untuk mengoptimumkan prestasi laman web dan pengalaman pengguna.

Bagaimana anda boleh mengesahkan kod HTML anda?Bagaimana anda boleh mengesahkan kod HTML anda?Apr 24, 2025 am 12:04 AM

Kod HTML boleh menjadi bersih dengan pengesahan dalam talian, alat bersepadu dan proses automatik. 1) Gunakan W3CMarkupValidationService untuk mengesahkan kod HTML dalam talian. 2) Pasang dan konfigurasikan sambungan HTMLHINT dalam visualStudiocode untuk pengesahan masa nyata. 3) Gunakan HTMLTidy untuk mengesahkan dan membersihkan fail HTML secara automatik dalam proses pembinaan.

HTML vs CSS dan JavaScript: Membandingkan Teknologi WebHTML vs CSS dan JavaScript: Membandingkan Teknologi WebApr 23, 2025 am 12:05 AM

HTML, CSS dan JavaScript adalah teknologi teras untuk membina laman web moden: 1. HTML mentakrifkan struktur laman web, 2. CSS bertanggungjawab untuk kemunculan laman web, 3.

Html sebagai bahasa markup: fungsinya dan tujuannyaHtml sebagai bahasa markup: fungsinya dan tujuannyaApr 22, 2025 am 12:02 AM

Fungsi HTML adalah untuk menentukan struktur dan kandungan laman web, dan tujuannya adalah untuk menyediakan cara yang standard untuk memaparkan maklumat. 1) HTML menganjurkan pelbagai bahagian laman web melalui tag dan atribut, seperti tajuk dan perenggan. 2) Ia menyokong pemisahan kandungan dan prestasi dan meningkatkan kecekapan penyelenggaraan. 3) HTML adalah diperpanjang, membolehkan tag tersuai untuk meningkatkan SEO.

Masa Depan HTML, CSS, dan JavaScript: Trend Pembangunan WebMasa Depan HTML, CSS, dan JavaScript: Trend Pembangunan WebApr 19, 2025 am 12:02 AM

Trend masa depan HTML adalah semantik dan komponen web, trend masa depan CSS adalah CSS-in-JS dan CSShoudini, dan trend masa depan JavaScript adalah webassembly dan tanpa pelayan. 1. Semantik HTML meningkatkan kebolehcapaian dan kesan SEO, dan komponen web meningkatkan kecekapan pembangunan, tetapi perhatian harus dibayar kepada keserasian penyemak imbas. 2. CSS-in-JS meningkatkan fleksibiliti pengurusan gaya tetapi boleh meningkatkan saiz fail. Csshoudini membolehkan operasi langsung rendering CSS. 3.Webassembly mengoptimumkan prestasi aplikasi penyemak imbas tetapi mempunyai keluk pembelajaran yang curam, dan tanpa pelayan memudahkan pembangunan tetapi memerlukan pengoptimuman masalah permulaan sejuk.

HTML: Struktur, CSS: Gaya, JavaScript: Tingkah LakuHTML: Struktur, CSS: Gaya, JavaScript: Tingkah LakuApr 18, 2025 am 12:09 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML mentakrifkan struktur laman web, 2. CSS mengawal gaya laman web, dan 3. JavaScript menambah tingkah laku dinamik. Bersama -sama, mereka membina kerangka, estetika dan interaktiviti laman web moden.

Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk WebMasa Depan HTML: Evolusi dan Trend dalam Reka Bentuk WebApr 17, 2025 am 12:12 AM

Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.

HTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganHTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganApr 16, 2025 am 12:04 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

VSCode Windows 64-bit Muat Turun

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual