html实战-制作静态网页「建议收藏」

html实战-制作静态网页「建议收藏」教程视频:http://edu.csdn.net/course/detail/535 从42开始制作的网页:http://www.cnos.co/整体思路:先布局再CSS控制骨架搭好了,初始化样式,后再弄CSS样式。注意:将CSS的样式导入到外部样式表时,要注意图片的位置,以及对外部样式表的引入  1、头部的背景图片的高度128px来自素材的图片高,容器的宽度大

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

教程视频:http://edu.csdn.net/course/detail/535   从42开始

制作的网页:http://www.cnos.co/

整体思路:

先布局再CSS控制

骨架搭好了,初始化样式,

后再弄CSS样式。注意:将CSS的样式导入到外部样式表时,要注意图片的位置,以及

对外部样式表的引入

  1、头部的背景图片的高度128px来自素材的图片高,容器的宽度大小也来自图片

的宽,那么这里背景图片设置的有意思吗?不设置效果一样呀!!

  2、图片的位置:当你在编写index.html页面代码时,出现一些图片路径时,那么

先分清楚哪些是同级目录文件

html实战-制作静态网页「建议收藏」html实战-制作静态网页「建议收藏」

  我现在在操作首页实战.html,里面有图片1的路径,从上面可以看出首页实战.htmlimg文件夹为同级的目录,则路径应该写为:img/1.jpg

效果图

html实战-制作静态网页「建议收藏」

<!DOCTYPE html>

<html>

<head>

<meta charset=“UTF-8”>

<title></title>

<style type=“text/css”>

#container{

width:1002px;

background-color:gray;

}

#header{

height:120px;

background-color: aquamarine;

}

#main{

height: 600px;

background: darkgoldenrod;

}

#footer{

height: 120px;

background: yellowgreen;

}

#main-left{

float: left;

background: yellow;

width: 700px;

height: 100%;

}

#main-right{

float: right;

background: pink;

width: 302px;

height:100% ;

}

</style>

</head>

<body>

<div id=“container”>

<div id=“header”></div>

<div id=“main”>

<div id=“main-left”></div>

    <div id=“main-right”></div>

</div>

<div id=“footer”></div>

</div>

</body>

</html>

注意:这里对idmaindiv里面的子div main-leftmain-right设置浮动样式时,要设置宽和高不然不起作用(起单独一个宽或者高也不起作用,这里的背景颜色只是父div的背景颜色)。可能的原因是div里面没内容,没长和宽,自然不会显示背景颜色

 3、当一个div包含两个左右浮动的div并且后面接个普通的div

             <div id=”main”>

   <div id=”lside”>

   </div>

   <div id=”rside”>

   </div>

             </div>

             <div id=”footer” >

             </div>

   因为两个浮动的div浮在水面上,但是父div(idmaindiv)没有高度所以没把父div撑开。Footerdiv会在水平面上,所以加背景颜色和height后可以看到此div在这两个浮动div下面,要使footerdiv呈现在下面并且不被覆盖,

html实战-制作静态网页「建议收藏」

第一种方法:给maindivheight800px;让他撑开

第二种方法:在两个浮动div后面加上一个classcldiv,样式为clearboth

网页制作的初步完成:

 Html代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=“UTF-8”>

<title></title>

<link rel=“stylesheet” type=“text/css” href=“css/reset.css”/>

<link rel=“stylesheet” href=“css/首页实战-2.css” />

</head>

<body>

<div id=“container”>               <!–div#container–>

<div id=“header”>              <!–div#header+div#main+div#footer–>

<img src=“img/logo.jpg” alt=“” id=“logo”/>

<ul id=“nav”>              

<li><a href=“#”>导航1</a></li>     <!–li*7>a>{导航$}–>

<li><a href=“#”>导航2</a></li>

<li><a href=“#”>导航3</a></li>

<li><a href=“#”>导航4</a></li>

<li><a href=“#”>导航5</a></li>

<li><a href=“#”>导航6</a></li>

<li><a href=“#”>导航7</a></li>

</ul>

</div>    

<img src=“img/about_banner.jpg” alt=“” id=“banner” />

<div id=“main”>

<div id=“lside”>

<div class=“subtitle”>

<img src=“img/circle.gif”/>

<h1>核心业务</h1>

<a href=“”>MORE>></a>

</div>

<div class=“four”>

<h2>电子商务类网站建设</h2>

<img src=“img/eshop_service.jpg” alt=“” />

<ul>                             <!–ul>li*5>{方便的货物管理$}–>

<li><a href=“#”>方便的货物管理</a></li>

<li><a href=“#”>自定义会员类型</a></li>

<li><a href=“#”>在线支付功能</a></li>

<li><a href=“#”>丰富的订单统计</a></li>

<li><a href=“#”>财务报表生成</a></li>

</ul>

</div>

<div class=“four”>

<h2>电子商务类网站建设</h2>

<img src=“img/eshop_service.jpg” alt=“” />

<ul>                             <!–ul>li*5>{方便的货物管理$}–>

<li><a href=“#”>方便的货物管理</a></li>

<li><a href=“#”>自定义会员类型</a></li>

<li><a href=“#”>在线支付功能</a></li>

<li><a href=“#”>丰富的订单统计</a></li>

<li><a href=“#”>财务报表生成</a></li>

</ul>

</div>

<div class=“four”>

<h2>电子商务类网站建设</h2>

<img src=“img/eshop_service.jpg” alt=“” />

<ul>                             <!–ul>li*5>{方便的货物管理$}–>

<li><a href=“#”>方便的货物管理</a></li>

<li><a href=“#”>自定义会员类型</a></li>

<li><a href=“#”>在线支付功能</a></li>

<li><a href=“#”>丰富的订单统计</a></li>

<li><a href=“#”>财务报表生成</a></li>

</ul>

</div>

<div class=“four”>

<h2>电子商务类网站建设</h2>

<img src=“img/eshop_service.jpg” alt=“” />

<ul>                             <!–ul>li*5>{方便的货物管理$}–>

<li><a href=“#”>方便的货物管理</a></li>

<li><a href=“#”>自定义会员类型</a></li>

<li><a href=“#”>在线支付功能</a></li>

<li><a href=“#”>丰富的订单统计</a></li>

<li><a href=“#”>财务报表生成</a></li>

</ul>

</div>

</div>

<div id=“rside”>

<div class=“subtitle”>

<img src=“img/circle.gif”/>

<h1>文章观点</h1>

<a href=“”>MORE>></a>

</div>

    <ul id=“art”>               <!–ul#nav>li*7>{文章$}–>

    <li><a href=“#”>这是一篇好文章1</a></li>    <!–li*5>a>{这是一篇好文章$}–>

    <li><a href=“#”>这是一篇好文章2</a></li>

    <li><a href=“#”>这是一篇好文章3</a></li>

    <li><a href=“#”>这是一篇好文章4</a></li>

    <li><a href=“#”>这是一篇好文章5</a></li>

    </ul>

    <div class=“subtitle”>

<img src=“img/circle.gif”/>

<h1>联系我们</h1>

<a href=“”>MORE>></a>

</div>

<div id=“contact”>

</div>

</div>

</div>

<div id=“footer”>

<ul>                                   <!–ul>li*7>a>{联系我们} –>

<li><a href=“#”>联系我们</a></li>

<li><a href=“#”>联系我们</a></li>

<li><a href=“#”>联系我们</a></li>

<li><a href=“#”>联系我们</a></li>

<li><a href=“#”>联系我们</a></li>

<li><a href=“#”>联系我们</a></li>

<li><a href=“#”>联系我们</a></li>

</ul>

<address>©2006-2009 北京市灵犀慧通科技有限公司版权所有 http://www.lionhit.com 京ICP备07020337号 W3C Valid CSS W3C Valid XHTML 1.0 Strict</address>

</div>

</div>

</body>

</html>

 

样式代码:

 #container {

 margin: 0 auto;

 width: 1002px;

 }

 

 #header {

 height: 128px;

 background: gray url(../img/top_bg.jpg) no-repeat;

 }

 

 #nav li {

 float: left;

  /*1、让导航横向*/

  /*background: purple;    */

  /*2、将导航撑开*/

  width: 90px;

 margin-right: 1px;

 }

 

 #nav a {

 font-size: 16px;

 font-family: “微软雅黑”;

 color: #363636;

 /*8、文字颜色*/

  display: block;

 /*5、鼠标移动上去后背景颜色局限在a标签内容中*/

  height: 37px;

  /*6、这些高度都有规定的*/

  width: 90px;

 text-align: center;

 /*7 、让文字居中*/

 }

 

 #nav a:hover {

 /*3、鼠标放上来后变的样式*/

  color: white;

 background: url(../img/nav_on.gif);

  /*4、鼠标移动后的背景颜色*/

 }

 #banner{

 margin: 10px 0;

 }

 #main{

 /*height: 800px; */                  /*  9、撑开*/

 }

 

.subtitle{

 height: 37px;

 background: url(../img/index_main_top_bg.gif);   /*14对原先设置的背景颜色进行更改*/

 

 }

 .subtitle img{

 float: left;                         /*10将初始化的图片左浮动*/

  margin: 5px 0 0 10px;                 /*11对图片进行微调*/

 }

 .subtitle h1{

 float:left;

 font-size: 16px;                           /*12对标题中字体进行设置*/

  font-family: “微软雅黑”,simhei,sans-serif;

 margin-left:10px;

 }

 .subtitle a{

 float: right;

 font-size: 12px;                            /*13对超链接进行微调*/

  color: gray;

 }

.four{

width: 326px;

height: 200px;

background: #EEE;                     /*这里将原先的背景改成其他的颜色(用QQ截图下面有显示RGB的颜色,这里只是转换成16进制)*/

float: left;

margin: 10px;

}

.four h2{

font-size: 16px;

font-family: “微软雅黑”;

margin: 6px 0 6px 10px;                     /*16将h2标题做做修改*/

}

.four img{

float: left;                           /*11、让class为four标签的img左浮动*/

margin-left: 10px;                            /*15图片背后有背景颜色为白色*/

padding: 6px;

background: white;

}

.four ul{

float: left;

margin-left: 10px;

}

.four li{

background: url(../img/service_intro_bg.gif) no-repeat;      /*16标签前面的小黑点*/

padding-left: 10px;                              /*17小黑点在字的下面*/

height: 20px;

}

.four a{

color: gray;                                   /*18a标签的颜色*/

}

 

#lside{

height: 480px;

width: 694px;

border: 1px solid #EEE;

float: left;                            /*8、让左右两个div并列一起*/

/*background: cornflowerblue;*/              /*这里设置是来区分9*/  /*19删除背景图*/

border-top: none;

}

 

#rside{

/*height: 600px;*/

width: 294px;

/*border:1px solid gray;*/

float: right;                            /*让左右两个div并列一起*/

/*background: greenyellow; */                /*这是一整个大的div到后面设置的话这个要去掉了*/

}

 

#art{

background: #EEE;

margin-top: 1px;

padding-top:10px;

}

 

#art a{

display: block;

background: url(../img/article_head.gif) no-repeat;

height: 29px;

padding-left: 30px;

}

#art a:hover{

background: url(../img/article_on_bg.gif);   /*鼠标移动到文章标题后的背景*/

}

#contact{

margin-top: 1px;

height: 250px;

background: #EEE;

}

#footer{

height: 120px;

/*background: gray;*/

clear:both;                         /* 9、撑开*/

margin-top: 20px;

}

#footer ul{

height: 40px;

background: #EEE;

}

#footer li{

float: left;

margin-top: 15px;

margin-right: 10px;

}

#footer address{

font-family: “微软雅黑”,sans-serif;

font-size:10px;

margin-top: 15px;

}

html实战-制作静态网页「建议收藏」

最后完美的:

HTML代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=“UTF-8”>

<title></title>

<link rel=“stylesheet” type=“text/css” href=“css/reset.css”/>

<link rel=“stylesheet” href=“css/首页实战-2.css” />

</head>

<body>

<div id=“container”>               <!–div#container–>

<div id=“header”>              <!–div#header+div#main+div#footer–>

<img src=“img/logo.jpg” alt=“” id=“logo”/>

<ul id=“nav”>              

<li><a href=“#”>导航1</a></li>     <!–li*7>a>{导航$}–>

<li><a href=“#”>导航2</a></li>

<li><a href=“#”>导航3</a></li>

<li><a href=“#”>导航4</a></li>

<li><a href=“#”>导航5</a></li>

<li><a href=“#”>导航6</a></li>

<li><a href=“#”>导航7</a></li>

</ul>

</div>    

<img src=“img/about_banner.jpg” alt=“” id=“banner” />

<div id=“main”>

<div id=“lside”>

<div class=“subtitle”>

<img src=“img/circle.gif”/>

<h1>核心业务</h1>

<a href=“”>MORE>></a>

</div>

<div class=“four”>

<h2>电子商务类网站建设</h2>

<img src=“img/eshop_service.jpg” alt=“” />

<ul>                             <!–ul>li*5>{方便的货物管理$}–>

<li><a href=“#”>方便的货物管理</a></li>

<li><a href=“#”>自定义会员类型</a></li>

<li><a href=“#”>在线支付功能</a></li>

<li><a href=“#”>丰富的订单统计</a></li>

<li><a href=“#”>财务报表生成</a></li>

</ul>

</div>

<div class=“four”>

<h2>电子商务类网站建设</h2>

<img src=“img/eshop_service.jpg” alt=“” />

<ul>                             <!–ul>li*5>{方便的货物管理$}–>

<li><a href=“#”>方便的货物管理</a></li>

<li><a href=“#”>自定义会员类型</a></li>

<li><a href=“#”>在线支付功能</a></li>

<li><a href=“#”>丰富的订单统计</a></li>

<li><a href=“#”>财务报表生成</a></li>

</ul>

</div>

<div class=“four”>

<h2>电子商务类网站建设</h2>

<img src=“img/eshop_service.jpg” alt=“” />

<ul>                             <!–ul>li*5>{方便的货物管理$}–>

<li><a href=“#”>方便的货物管理</a></li>

<li><a href=“#”>自定义会员类型</a></li>

<li><a href=“#”>在线支付功能</a></li>

<li><a href=“#”>丰富的订单统计</a></li>

<li><a href=“#”>财务报表生成</a></li>

</ul>

</div>

<div class=“four”>

<h2>电子商务类网站建设</h2>

<img src=“img/eshop_service.jpg” alt=“” />

<ul>                             <!–ul>li*5>{方便的货物管理$}–>

<li><a href=“#”>方便的货物管理</a></li>

<li><a href=“#”>自定义会员类型</a></li>

<li><a href=“#”>在线支付功能</a></li>

<li><a href=“#”>丰富的订单统计</a></li>

<li><a href=“#”>财务报表生成</a></li>

</ul>

</div>

</div>

<div id=“rside”>

<div class=“subtitle”>

<img src=“img/circle.gif”/>

<h1>文章观点</h1>

<a href=“”>MORE>></a>

</div>

    <ul id=“art”>               <!–ul#nav>li*7>{文章$}–>

    <li><a href=“#”>这是一篇好文章1</a></li>    <!–li*5>a>{这是一篇好文章$}–>

    <li><a href=“#”>这是一篇好文章2</a></li>

    <li><a href=“#”>这是一篇好文章3</a></li>

    <li><a href=“#”>这是一篇好文章4</a></li>

    <li><a href=“#”>这是一篇好文章5</a></li>

    </ul>

    <div class=“subtitle”>

<img src=“img/circle.gif”/>

<h1>联系我们</h1>

<a href=“”>MORE>></a>

</div>

<div id=“contact”>

</div>

</div>

</div>

<div id=“footer”>

<ul>                                   <!–ul>li*7>a>{联系我们} –>

<li><a href=“#”>联系我们</a></li>

<li><a href=“#”>联系我们</a></li>

<li><a href=“#”>联系我们</a></li>

<li><a href=“#”>联系我们</a></li>

<li><a href=“#”>联系我们</a></li>

<li><a href=“#”>联系我们</a></li>

<li><a href=“#”>联系我们</a></li>

</ul>

<address>©2006-2009 北京市灵犀慧通科技有限公司版权所有 http://www.lionhit.com 京ICP备07020337号 W3C Valid CSS W3C Valid XHTML 1.0 Strict</address>

</div>

</div>

</body>

</html>

 

CSS代码:

 #container {

 margin: 0 auto;

 width: 1002px;

 }

 

 #header {

 height: 128px;

 background: gray url(../img/top_bg.jpg) no-repeat;

 }

 

 #nav li {

 float: left;

 /*1、让导航横向*/

  /*background: purple;    */

  /*2、将导航撑开*/

  width: 90px;

 margin-right: 1px;

 }

 

 #nav a {

  /*font-size: 16px;

 font-family: “微软雅黑”;

 line-height:37px ;                  /*让导航内容居中*/

 font:16px/37px “微软雅黑”,‘黑体’,sans-serif;    /*可以简写为下面的,可以少写,但要有顺序*/

  color: #363636;

 /*8、文字颜色*/

  display: block;

 /*5、鼠标移动上去后背景颜色局限在a标签内容中*/

  height: 37px;

 /*6、这些高度都有规定的*/

  width: 90px;

 text-align: center;

 /*7 、让文字居中*/

 

 }

 

 #nav a:hover {

 /*3、鼠标放上来后变的样式*/

  color: white;

 background: url(../img/nav_on.gif);

 /*4、鼠标移动后的背景颜色*/

 }

 #banner{

 margin: 10px 0;

 }

 #main{

  /*height: 800px; */                  /*  9、撑开*/

 }

 

.subtitle{

 height: 37px;

 background: url(../img/index_main_top_bg.gif);   /*14对原先设置的背景颜色进行更改*/

  line-height: 37px;

 }

 .subtitle img{

 float: left;                         /*10将初始化的图片左浮动*/

  margin: 5px 0 0 10px;                 /*11对图片进行微调*/

 }

 .subtitle h1{

 float:left;

 font-size: 16px;                           /*12对标题中字体进行设置*/

  font-family: “微软雅黑”,simhei,sans-serif;

 margin-left:10px;

 }

 .subtitle a{

 display: block;

 float: right;

 font-size: 12px;                            /*13对超链接进行微调*/

  color: #888;

 line-height: 37px;

 }

.four{

width: 326px;

height: 200px;

background: #EEE;                     /*这里将原先的背景改成其他的颜色(用QQ截图下面有显示RGB的颜色,这里只是转换成16进制)*/

float: left;

margin: 10px;

}

.four h2{

color: #A0A0A0;                       /*字体颜色微调*/

font-size: 16px;

font-family: “微软雅黑”;

margin: 6px 0 6px 10px;                     /*16将h2标题做做修改*/

}

.four img{

float: left;                           /*11、让class为four标签的img左浮动*/

margin-left: 10px;                            /*15图片背后有背景颜色为白色*/

padding: 6px;

background: white;

}

.four ul{

float: left;

margin-left: 10px;

}

.four li{

background: url(../img/service_intro_bg.gif) no-repeat;      /*16标签前面的小黑点*/

padding-left: 10px;                              /*17小黑点在字的下面*/

height: 20px;

}

.four a{

color: #888;                                   /*18a标签的颜色*/

}

.four a:visited{

color: #808080;

}

 

.four a:hover{

color: #FF832C;

}

#lside{

height: 480px;

width: 694px;

border: 1px solid #EEE;

float: left;                            /*8、让左右两个div并列一起*/

/*background: cornflowerblue;*/              /*这里设置是来区分9*/  /*19删除背景图*/

border-top: none;

}

 

#rside{

/*height: 600px;*/

width: 294px;

/*border:1px solid gray;*/

float: right;                            /*让左右两个div并列一起*/

/*background: greenyellow; */                /*这是一整个大的div到后面设置的话这个要去掉了*/

}

 

#art{

background: #EEE;

margin-top: 1px;

padding-top:10px;

}

 

#art a{

color: #888;

display: block;

background: url(../img/article_head.gif) no-repeat;

height: 29px;

line-height:29px ;

padding-left: 30px;

}

#art a:hover{

color:#FF832C;

background: url(../img/article_on_bg.gif);   /*鼠标移动到文章标题后的背景*/

}

#contact{

margin-top: 1px;

height: 250px;

background: #EEE;

}

#footer{

height: 120px;

/*background: gray;*/

clear:both;                         /* 9、撑开*/

margin-top: 20px;

}

#footer ul{

height: 40px;

background: #EEE;

}

#footer li{

float: left;

margin-top: 15px;

margin-right: 10px;

}

#footer address{

font-family: “微软雅黑”,sans-serif;

font-size:10px;

margin-top: 15px;

}

#footer a:visited{

color: #808080;

}

#footer a:hover{

color: #FF832C;

}


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/197013.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 远程桌面命令是什么 如何使用命令连接远程桌面

    远程桌面命令是什么 如何使用命令连接远程桌面

  • mac navicat premium15 激活码 破解[在线序列号]

    mac navicat premium15 激活码 破解[在线序列号],https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • spring aop实例讲解_Spring Framework

    spring aop实例讲解_Spring Framework在上篇博文中,我向大家介绍了Aop重要概念和教程,这回给出代码示例。一、XML方式1.TestAspect:切面类packagecom.spring.aop;importorg.aspectj.lang.JoinPoint;importorg.aspectj.lang.ProceedingJoinPoint;publicclassTestAspect{ pu

  • 宝塔搭建php项目是什么_用宝塔怎么修改网站源码

    宝塔搭建php项目是什么_用宝塔怎么修改网站源码宝塔搭建PHP项目宝塔下载地址我选的是linux用宝塔搭建前提是你买的服务器并没有安装任何的镜像与环境进入官网选择你要的然后点击立即安装进入安装教程安装要求根据自己的主机商进入,我的是阿里云的设置一些开放端口添加安全组规则添加这些必要的端口mysql3306的记住一定要放行,这样可用本地工具连接远程服务器的数据库上面设置好之后就可以安装了,我的是Centosyuminstall-ywget&&wget-Oin

  • 【Quartz】定时器初步实验(一)

    【Quartz】定时器初步实验(一)以前就了解了Quartz这个定时框架,但是一直没有认真的去关注他,最近忽然看到已经更新到3.0.4支持异步操作了所以就写个简单的小例子看看好用不。第一步:创建项目创建一个新项目,可以是ASP.NE

  • es数据库查询API「建议收藏」

    es数据库查询API「建议收藏」1.背景ES数据库是非关系型数据库2.ES数据库优点1.存储优化内存中使用有限状态机FST优化本质上是前缀树加上后缀树的结合,利用这个数据结构可以把Term更节省内存地放置并查询,它有着字典树的查询时间复杂度,但是由于做了后缀合并会更节约内存传统Bitmap优化使用Bitmap来记录文档的Id,每个bit对应一个文档,表示它是否存在。2.联合查询优化若要对多个t…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号