⽹页设计（六）——基于HTML+CSS框架的⽹页设计实例前⾔：好久没更新过CSDN博客了，现在从原来的OI，变成了⼀个科研⼯作者。最近打算把原来的⼀些资料整理⼀下，作为经验公开分享，希望能帮到更多默默努⼒耕耘的⼈~
⽹页设计系列之前写了五期，分别为：
这⾥给出⼀个综合性实例供⼤家参考，实例的效果如下，其中的图⽚素材都是⽹上的：
HTML代码如下：
<html>
<head><link rel="stylesheet" type="text/css" href="css/homepage.css"/></head>
<body>mysqlinsert成功但没有数据
<div id="Container">
<!-------------------------------------------------------------------------------------------------->
<div id="top">
<div id="logo">LOGO</div>
<div id="small_nav">
<ul>
<li><a href="readme.html">设为⾸页</a></li>
<li><a href="readme.html">加⼊收藏</a></li>
<li><a href="readme.html">English</a></li>
</ul>
</div>
<br>
<div id="phone_intro"> 全国免费:<special>400 **********</special></div>
</div>
<!-------------------------------------------------------------------------------------------------->
<div id="link">
<div id="nav">
<ul>
<li><a href="readme.html">⽹站⾸页</a></li>
<li><a href="readme.html">关于我们</a></li>
<li><a href="readme.html">产品展⽰</a></li>
<li><a href="readme.html">新闻中⼼</a></li>
<li><a href="readme.html">资质证书</a></li>
<li><a href="readme.html">⼈才招聘</a></li>
<li><a href="readme.html">在线留⾔</a></li>
strtok不修改<li><a href="readme.html"></a></li>
</ul>
</div>
</div>
<!-------------------------------------------------------------------------------------------------->
<div id="picture">
<div align="center"><img src="spring.jpg"></div>
<div id="dynamic_text_pre"><p >最新动态</p></div>
<div id="dynamic_text">
<marquee align="left" behavior="scroll" bgcolor="white" direction="left" hspace="0" vspace="0"
weith="800" height="27" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()"
学生个人网页制作html代码cssonMouseOver="this.stop()">
<p >·中国⼤学⽣创业⽹ ·过去七年，这家公司的营业额翻了24番，从2004年的...... </marquee>
</div>
</div>
<!-------------------------------------------------------------------------------------------------->
<div id="official1">
<div id="content_title">公司简介</div>
<div id="content_picture"><img src="company.jpg"></div>
<div id="content_text">
&emsp；深圳星狮创想信息咨询有限公司（SinceIdea），简称星狮创想，创于2009年，是国内⾸家UI培训、UED培训远程教育机构，经过近三年的发展，我们 </div>
</div>
<!----------------------------------------------->
<div id="official2">
<div id="content2_title">业界动态</div>二叉排序树遍历
<p >
符合创意产业和教育标准的中国移动
</p>
<p >
我们致⼒于培养符合创意产业和教育标准的中国移动互联⽹领域⼈才。为适应中国......
</p>
<div id="content2">
<ul>
<li><a href="readme.html">·深圳星狮创想信息咨询有限公司，简称</a></li>
<li><a href="readme.html">·星狮创想，创办于2009年，是国内⾸家</a></li>
<li><a href="readme.html">·培训远程教育机构，经过近三年的……</a></li>
<li><a href="readme.html">·6⽉8⽇消息，新浪平⼊分成UI</a></li>
<li><a href="readme.html">·6⽉8⽇，新浪微博官⽅游戏平台微游戏</a></li>
</ul>
</div>
</div>
<!----------------------------------------------->
<div id="official3">
<div id="content_title">联系⽅式</div>
<div id="content_picture"><img src="company.jpg"></div>
<div id="content_text">
&emsp；深圳星狮创想信息咨询有限公司（SinceIdea），简称星狮创想，创于2009年，是国内⾸家UI培训、UED培训远程教育机构，经过近三年的发展，我们 </div>
</div>
<!-------------------------------------------------------------------------------------------------->
<div id="dynamic_picture">
<marquee width="800" height="110">
<table width="850" height="110" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="12.5%" align="center" valign="middle"><img src="cakemodel.jpg"></td>
<td width="12.5%" align="center" valign="middle"><img src="ice_cube_container.jpg"></td>
<td width="12.5%" align="center" valign="middle"><img src="gloves.jpg"></td>
<td width="12.5%" align="center" valign="middle"><img src="brush.jpg"></td>
<td width="12.5%" align="center" valign="middle"><img src="bowl.jpg"></td>
<td width="12.5%" align="center" valign="middle"><img src="ice_cube_container.jpg"></td>
<td width="12.5%" align="center" valign="middle"><img src="gloves.jpg"></td>
<td width="12.5%" align="center" valign="middle"><img src="brush.jpg"></td>
</tr>
<tr>
<td width="12.5%" align="center" valign="middle"><p >硅胶蛋糕模</p></td> <td width="12.5%" align="center" valign="middle"><p >硅胶冰格</p></td> <td width="12.5%" align="center" valign="middle"><p >硅胶⼿套</p></td> <td width="12.5%" align="center" valign="middle"><p >硅胶刷⼦</p></td> <td width="12.5%" align="center" valign="middle"><p >硅胶碗</p></td>
<td width="12.5%" align="center" valign="middle"><p style="color:black;font-size:12px;position:relati
ve;bottom:3px;">硅胶冰格</p></td> <td width="12.5%" align="center" valign="middle"><p >硅胶⼿套</p></td> <td width="12.5%" align="center" valign="middle"><p >硅胶刷⼦</p></td> </tr>
</table>
</marquee>
</div>
<!-------------------------------------------------------------------------------------------------->
<div id="footer">
<div align="center">*本⽹站中所涉及的图⽚、⽂字等资料均属于***********有限公司所有，未经许可不得转载*</div>
<div align="center">湘ICP备**********号 ******提供技术⽀持</div>
</div>
</div>
</body>
</html>
CSS代码段如下：
body
{
margin:0;
padding:0;
border:0;
color:white;
}
a:link,a:hover
{
text-decoration:none;
color:white;
}
#Container
{
width:1024px;
margin:auto auto;/*设置整个容器在浏览器中⽔平居中*/
height:auto;
}
/
*********************************************************************************************/
#top
{
width:1000px;
height:100px;
font-size:30px;
line-height:50px;
margin:0px 12px 0px 12px;
background-color:#E5F0FA;
}
#logo
{
color:black;
font-size:40px;
font-family:⿊体;
font-weight:bolder;
margin:20px 0px 0px 100px;
float:left;
}
#small_nav ul
#small_nav ul
{
list-style:none;/*去掉ul前⾯的项⽬符号*/
margin:40px 100px 0px 0px;
width:auto;
height:10px;
float:right;
/*border:1px solid white;*//*设置边框显⽰竖线效果*/
/*margin-left:60px;*//*控制外边距（margin）达到定位的效果*/
/*padding-left:50px;*//*控制内边距达到定边框竖线的效果*/
padding:0px;
}
#small_nav ul li
{
float:left;/*变为横向排列*/
}
#small_nav ul li a,#small_nav ul li a:visited
{
color:#1F202B;
display:block;
line-height:1.0em;
padding:4px 5px;
text-decoration:none;/*不显⽰超链接下划线*/
font-size:12px;
}
#small_nav ul li a:hover/*hover-⿏标指针位于链接的上⽅*/
{
background-color:#bfcbd6;
color:#465c71;
text-decoration:none;
}
#small_nav ul li a:active/*active-链接被点击的时刻*/
{
background-color:#465c71;
color:#cfdbe6;
text-decoration:none;
}
#phone_intro
{
color:#1F202B;
font-size:12px;
float:right;
margin:0px 104px 0px 0px;
position:relative;
bottom:3px;
}
宿舍管理系统sql
#phone_intro special
{
color:#0269A5;
font-size:15px;
font-family:Calibri;
}
/*********************************************************************************************/ #link
{
height:30px;
width:1000px;
margin:0px 12px 0px 12px;
background-color:#0269A5;
border-top-width:1px;
border-top-style:dashed;
border-right-style:none;
border-bottom-style:none;
border-left-style:none;
border-top-color:blue;
}
}
#nav ul
{
list-style:none;
margin:0px;
padding:0px;
height:auto;
width:auto;
}
#nav ul li
{
float:left;
}
#nav ul li a,#nav ul li a:visited
{
background-color:#0269A5;
border:1px #4e667d solid;
color:#dde4ec;
font-size:12px;
display:block;/*显⽰为块级元素，此元素前后会带有换⾏符*/
line-height:1.35em;
padding:8px 37.5px;
text-decoration:none;
white-space:nowrap;/*⽂本内的空⽩处，不会换⾏,⽂本会在同⼀⾏上继续，直到遇到<br>*/ }
#nav ul li a:hover
s11全球总决赛八强{
background-color:#bfcbd6;
color:#465c71;
text-decoration:none;
}
#nav ul li a:active
{
background-color:#465c71;
color:#cfdbe6;
text-decoration:none;
}
/
*********************************************************************************************/
#picture
{
width:956px;
height:300px;
padding:22px;
margin:0px 12px 0px 12px;
background-image:url('grass(css).jpg');
background-attachment:fixed;/*背景图像固定，不会随着页⾯的其余部分滚动*/
}
#dynamic_text_pre
{
width:69px;
height:32px;
margin:20px auto 10px 72px;
background-color:white;
float:left;
text-align:center;
border:1px solid #C4C4C4;
border-right-style:none;
border-top-color:white;
}
#dynamic_text_pre p
{
position:relative;
bottom:3px;
left:0px;
}
#dynamic_text
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论