网站首页布局实战（简单）

跟着教程完成了一个简单的首页制作，没有用js，毕竟是第一个实战，纪念一下

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="top">
<div class="top-content">
<ul>
<li><a href="#">设为首页</a></li>
<li><a href="#">加入收藏</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</div><!--top结束-->
<div class="wrap">
<div class="logo">
<div class="logo-left">
<img src="img/logo.jpg" alt="慕课网"/>
</div>
<div class="logo-right">
<img src="img/tel.jpg" alt="服务热线"/>24小时服务热线：<span class="tel">88888888</span>
</div>
</div><!--logo结束-->
<div class="nav">
<div class="nav-left"></div>
<div class="nav-mid">
<div class="nav-mid-left">
<ul>
<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>
</div>
<div class="nav-mid-right">
<form action="" method="post">
<input type="text" class="search-text"/></form>
</div>
</div><!--nav-mid结束-->
<div class="nav-right"></div>
</div><!--nav结束-->
<div class="main">
<div class="news">
<div class="title">
<h2 class="title-left">新闻中心</h2><span class="title-right"><a href="#">More&gt;&gt;</a></span>
</div><!--title结束-->
<div class="pic-news">
<img src="img/news.jpg"/>
<h2><a href="#">520慕女神喊你来表白</a></h2><p>活动时间：5月20日-5月25日</br>获奖公布时间：5月26日</br><a href="#">Learn More&gt;&gt;</a></p>
</div>
<div class="news-list">
<ul>
<li><span>2017-06-01</span><a href="#">[慢慢满满木木木木木木木木木]么么么么</a></li>
<li><span>2017-06-01</span><a href="#">[慢慢满满木木木木木木木木木]么么么么</a></li>
<li><span>2017-05-23</span><a href="#">[慢慢满满木木木木木木木木木]么么么么</a></li>
<li><span>2017-05-09</span><a href="#">[慢慢满满木木木木木木木木木]么么么么</a></li>
</ul>
</div><!--pic-news结束-->
<div class="news-list"></div><!--news-list结束-->
</div><!--news结束-->
<div class="course">
<div class="title">
<h2 class="title-left">课程中心</h2><span class="title-right"><a href="#">More&gt;&gt;</a></span></div><!--title结束-->
<div class="course-pic">
<img src="img/css.jpg"/><h2><a href="#">CSS圆角进化论</a></h2><p>哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</p></div><!--course-pic结束-->
<div class="course-type">
<ul>
<li>bbbbbbbb</li>
<li>ssssssss</li>
<li>aaaaaaaa</li>
</ul>
</div><!--course-type结束-->
</div><!--course结束-->
<div class="sidebar">
<div class="video">
<div class="title">
<h2 class="title-left">媒体聚焦</h2><span class="title-right"><a href="#">More&gt;&gt;</a></span>
</div><!--title结束-->
<div class="video-content">
<object width=220 height=140><param name="movie" value="http://share.vrs.sohu.com/my/v.swf&topBar=1&id=89404461&autoplay=false&from=page"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="Transparent"></param><embed width=220 height=140 wmode="Transparent" allowfullscreen="true" allowscriptaccess="always" quality="high" src="http://share.vrs.sohu.com/my/v.swf&topBar=1&id=89404461&autoplay=false&from=page" type="application/x-shockwave-flash"/></embed></object>
</div><!--video-content结束--></div><!--video结束-->
<div class="sidebar-ad">
<img src="img/app.jpg"/>
</div><!--sideer-ad结束-->
</div><!--sidebar结束-->
</div><!--main结束-->
</div><!--wrap结束-->

<div class="copyright">
<div class="copyright-content">
<ul>
<li><a href="#">关于</a>
<ul>
<li><a href="#">品牌故事</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">加入我们</a></li>
<li><a href="#">版权声明</a></li>
</ul>
</li>
<li><a href="#">课程</a>
<ul>
<li><a href="#">顶顶顶顶</a></li>
<li><a href="#">额鹅鹅鹅</a></li>
<li><a href="#">额鹅鹅们</a></li>
<li><a href="#">呃呃呃饿</a></li>
</ul>
</li>
<li><a href="#">留言</a>
<ul>
<li><a href="#">品牌故事</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">加入我们</a></li>
<li><a href="#">版权声明</a></li>
</ul>
</li>
<li><a href="#">关注</a>
<ul>
<li><a href="#">品牌故事</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">加入我们</a></li>
<li><a href="#">版权声明</a></li>
</ul>
</li>
<li><a href="#"><img src="img/weixin.png"/>微信关注</a>
<ul><li><img src="img/qrcode.jpg"/></li></ul>
</li>
</ul>
</div>
</div>

</body>
</html>

CSS：

*{
margin: 0;
padding: 0;
font-size: 12px;
}
* a:link,* a:visited{
text-decoration:none;
}
* a:hover,* a:active{
text-decoration:none;}
body{
background-color: #F5F5F5;
}
.top{
width: 100%;
height: 27px;
background: url(../img/top_bg.jpg) repeat-x;
}
.top-content{
width:1000px;
margin:0 auto;

}
.top-content li{
list-style-image:url(../img/li_bg.gif);
float:right;
width:70px;
line-height:27px;
}
.top-content a:link,.top-content a:visited{
color:#999;
text-decoration:none;
}
.top-content a:hover,.top-content a:active{
color:#0F0;
text-decoration:none;

}
.wrap{
width:1000px;
margin:0 auto;
}
.logo{
height:80px;
background-color:#FFF;
}
.logo-left{
width:200px;
float:left;
}
.logo-right{
width:300px;
float:right;
height:28px;
margin-top:30px;
color:#999;
}
.logo-right img{
vertical-align:middle;
margin-right:10px;
}
.tel{
color:#F00;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;}
.nav{
clear:left;
height:40px;}
.nav-left{
width:10px;
background:url(../img/nav_left.jpg) no-repeat;
float:left;
height:40px;}
.nav-mid{
width:980px;
background:url(../img/nav_bg.jpg) repeat-x;
float:left;
}
.nav-right{
width:10px;
background:url(../img/nav_right.jpg) no-repeat;
float:left;
height:40px;
}
.nav-mid-left,.nav-mid-right{
float:left;
}
.nav-mid-left{
width:680px;
}
.nav-mid-right{
width:300px;
}
.nav-mid-left li{
width:100px;
height:40px;
text-align:center;
line-height:40px;
list-style-type:none;
float:left;
}
.nav-mid-left a:link,.nav-mid-left a:visited{
text-decoration:none;
color:#FFF;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
}
.nav-mid-left a:hover,.nav-mid-left a:active{
text-decoration:none;
color:#F00;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;}
.search-text{
width:190px;
height:25px;
margin-top:5px;
background:url(../img/search.jpg) no-repeat right center;
background-color:#FFF;
padding-right:25px;
border:1px solid #FFF;
}
.main{
height:250px;
margin-top:5px;
background-color:#fff;
}
.news{
width:340px;
border:1px solid #E8E8E8;
}
.course{
width:410px;
border:1px solid #E8E8E8;
margin:0 7px;
}
.sidebar{
width:230px;
}
.news,.course,.sidebar{
height:250px;
float:left;}
.title{
height:35px;
border-bottom:2px solid #e8e8e8;
}
.title-left{
width:70%;
font: 14px bold #333 Arial, Helvetica, sans-serif;
float:left;
line-height:35px;
padding-left:20px;
}
.title-right{
width:20%;
line-height:35px;
float:right;
text-align:right;
padding-right:2px;
}
.title-right a{
color:#000;}
.pic-news{
height:80px;
margin-top:10px;
line-height:22px;}
.pic-news img,.course-pic img{
float:left;
margin:0 5px;}
.pic-news a,.course-pic a{
color:#F00;}
.news-list{
margin-top:20px;
}
.news-list li{
list-style-type:none;
background:url(../img/list.jpg) no-repeat;
padding-left:10px;
margin:8px;
border-bottom:1px dotted #666;}
.news-list a:link,.news-list a:visited{
color:#000;}
.news-list a:hover,.news-list a:active{
color:#F00;}
.news-list span{
color:#666;
float:right;}

.course-pic{
height:120px;
margin-top:10px;
line-height:22px;
}
.course-type{
height:37px;
width:372px;
background:url(../img/product_type_bg.jpg) no-repeat;
margin:20px auto;
}
.course-type li{
list-style-type:none;
float:left;
line-height:37px;
margin:0 30px;
text-align:center;
}
.video{
height:185px;
border:1px solid #E8E8E8;}
.video-content{
height:150px;
}
.sidebar-ad{
height:55px;
border:1px solid #E8E8E8;
margin-top:5px;
}
.copyright{
margin-top:10px;
clear:both;
width:100%;
height:200px;
background:#E8E8E8;
}
.copyright-content{
padding-top:10px;
width:1000px;
margin:0 auto;}
.copyright-content li{
list-style-type:none;
width:200px;
float:left;
background:url(../img/line.png) no-repeat right center;
text-align:center;
line-height:30px;
}
.copyright-content a{
color:#666;
font:18px Arial, Helvetica, sans-serif;}
.copyright-content li ul li a{
font-size:14px;}

时间： 2024-10-09 02:30:35

网站首页布局实战（简单）的相关文章

企业网站综合布局实战

网站分布 头部logo,导航区,内容展示,底部版权 盒子模型复习 div是块级元素,会另起一行 span 内联元素 块级元素自己占一行,不能有其他元素和他在同一行 浮动框脱离文档流,不占据普通文档的位置 网页头部分解 设置盒子内容在水平方向居中: text-align:center 垂直居中,设置行高line-height等于盒子的高度 超链接:a:link 初始状态 a:visited 访问过后 a:hover 悬停经过状态 a:active 点击状态 a标签属于内联元素,无高度和宽度属性,因

SharePoint Online 创建门户网站系列之首页布局

前 言 SharePoint Online中创建首页布局,一般都是首先将美工提供的效果图,切图成为Html + Css + Script的形式,然后,将所有资源文件传到SharePoint Online的资源库,在Designer中创建页面,添加Html页面,修改引用. 下面,让我们一步步来演示这一过程. 一. 拿到效果图,进行切图 SharePoint Online的布局,通常由美工制作效果图,并且切图为Html+图片+样式+脚本的方式,到我们开发人员手里,就方便页面的创建了. 这里,我已经由

[转]企业网站首页设计常见的6种布局方式

在群里和大家交流时,看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不了大框套小框的设计布局思路,不加思索的跳入单一的网页布局形式中,于是就有了把企业站常用的页面布局方式总结一下的想法,让大家包括我自己全面的了解一下企业站的常见布局方式,做到对此种类型的网站布局心中有数,跳出狭隘.单一的设计思路,于是就有了这篇文章.很多人常常询问某个页面该如何布局这样的问题,其实网页布局也没有想象中那么难,只要做到两点我认为起码可以做到临阵不慌,一是对常见的布局方式心中有数,二是根据信息内容及设计素材的

网站首页之早期布局

网站首页之早期布局方法,虽然现在基本不用了,但是我感觉还是应该知道的,说你不定哪一年的哪一天这种布局格式又火了.不排除这种可能,就像十年之前非常流行的喇叭裤一样,说不定十年之后这种网站布局方式又火了呢?,至少值得收藏.当然,后期还会给出目前计算机行业比较流行的网站布局方式. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

PHP.5-DIV+CSS布局网站首页实例

DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS的解析差异,需对其进行测试 不同浏览器的区别[http://www.wenkuxiazai.com/doc/5fd3b2774afe04a1b171de3e.html] 1.IE和FF居中不一样 text-align:center  #包中所有文本居中 2.IE指定的最小高度为18px,FF都可以

如何布局网站首页

如何布局网站首页良好的页面布局及代码优化对用户体验和搜索引擎友好度有很好的促进作用.在设计网站首页应该注意以下几点:一.主导航覆盖的信息要全面导航是一个网站的重点,相当于文章的核心,跟标题作用差不多.方便用户快速了解网站大概信息.二.左侧分出二级导航二级导航是对主导航的进一步补充和说明,因为很多时候主导航想表达的信息不一定完善,这个时候就需要二级导航来进行补充.有效的提高用户体验.三.文字图片共存不管单一是图片还是文字.感觉都缺乏说服力.所以就需要图文并茂.这样更能向用户成功推荐一个产品.四.首

html第四天网站首页的布局设计到实施

项目布局: index.html images |–index.css |–reset.css index代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="./images/i

企业网站首页设计常见的6种布局方式

看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不了大框套小框的设计布局思路,不加思索的跳入单一的网页布局形式中,于是就有了把企业站常用的页面布局方式总结一下的想法,让大家包括我自己全面的了解一下企业站的常见布局方式,做到对此种类型的网站布局心中有数,跳出狭隘.单一的设计思路,于是就有了这篇文章.很多人常常询问某个页面该如何布局这样的问题,其实网页布局也没有想象中那么难,只要做到两点我认为起码可以做到临阵不慌,一是对常见的布局方式心中有数,二是根据信息内容及设计素材的特点进行摆积木式的多

简单的网站首页

<!doctype html> <html> <head> <meta charset="utf-8"> <title>网站首页</title> <style type="text/css"> body{background:url("images/bg.png") top center no-repeat;font-size:12px;font-family:宋