[学习交流] 分享经过18天学习后2小时写的网站

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>传智播客</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="font/iconfont.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>

<div class="header w">

<div class="logo fl">
<h1>
<a href="index.html">
<img src="img/logo.png" alt="">
</a>
</h1>
</div>

<div class="nav fr">
<ul>
<li><a href="#" class="shoye">首页</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 class="scroll">
<div class="w">
<div class="gt fl"><em class="iconfont"></em></div>
<div class="gl fr"><em class="iconfont"></em></div>
</div>
</div>


<div class="w">
<div class="anli">
<img src="img/anli.png" alt="">
</div>
<div class="anli_tu">
<ul>
<li class="tupin">
<a href="#">
<img src="img/tu-1.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="img/tu-2.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="img/tu-3.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="img/tu-4.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="img/tu-5.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="img/tu-6.jpg" alt="">
</a>
</li>
</ul>
</div>
</div>

<div class="fuwu">
<div class="w">
<div class="fuwu_img">
<img src="img/fuwu.png" alt="">
</div>
<p>xxxx有限公司网络品牌机构。专注网站建设、网站设计、品牌设计、空间设计、网络营销、网站托管、整合营销服务为核心服务。专注于创意设计实现商业价值较大化，为所有谋求长远发展的企业提升品牌品质。拥有经验丰富技术团队，专业的资深设计师。凝聚了一批行业内优秀的年轻人，富有创造力和奉献精神。我们所做的一切都是以客户的利益为出发点，帮助企业建立全面且切实的市场形象，我们坚信与企共同成长！</p>
<button>了解我们</button>
</div>
</div>

<div class="w">
      <div class="xin">
        <img src="img/xin.png" alt="">
      </div>
      <div class="xin_tu">
        <ul>
        <li>
        <img src="img/xin-1.jpg" alt="">
        <h4>优秀界面的优质形态：隐形的界面</h4>
        <p>真正优秀的用户界面会被无视，而糟糕的设计则迫使用户注意界面的，而非内容。用户都是带着目的来访问网站的：买本新书、学...</p>
        </li>
        <li>
        <img src="img/xin-2.jpg" alt="">
        <h4>优秀界面的优质形态：隐形的界面</h4>
        <p>真正优秀的用户界面会被无视，而糟糕的设计则迫使用户注意界面的，而非内容。用户都是带着目的来访问网站的：买本新书、学...</p>
        </li>
        <li>
        <img src="img/xin-3.jpg" alt="">
        <h4>优秀界面的优质形态：隐形的界面</h4>
        <p>真正优秀的用户界面会被无视，而糟糕的设计则迫使用户注意界面的，而非内容。用户都是带着目的来访问网站的：买本新书、学...</p>
        </li>
        </ul>
      </div>
</div>


<div class="toopre">
<div class="w">
<ul class="fl">
<li>
<dl>
<dt class="wum">我们</dt>
<dd><a href="#">服务项目</a></dd>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">新闻动态</a></dd>
<dd><a href="#">联系我们</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="wum">案例</dt>
<dd><a href="#">全部</a></dd>
<dd><a href="#">网站</a></dd>
<dd><a href="#">移动app</a></dd>
<dd><a href="#">桌面软件</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="wum">方案</dt>
<dd><a href="#">移动互联网</a></dd>
<dd><a href="#">在线金融</a></dd>
<dd><a href="#">传统企业转型</a></dd>
<dd><a href="#">医疗健康</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="wum">发现</dt>
<dd><a href="#">战略伙伴</a></dd>
<dd><a href="#">官方博客</a></dd>
<dd><a href="#">留言板</a></dd>
<dd><a href="#">友情链接</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="wum">扫码关注</dt>
<dd>
<img src="img/ma.jpg" alt="">
</dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="chuan">
<div class="w">
<p>北京传智播客教育科技有限公司版权所有Copyright 2006-2019 All Rights Reserved 京ICP备08001421号京ICP证161252号京公网安备110108007702</p>
</div>
</div>
</body>
</html>

/*公共样式 */
.w {
width: 1200px;
margin: 0 auto;
}
.fl {
float: left;
}
.fr {
float: right;
}
/* header */
.header {
height: 120px;
}
.logo {
margin-top: 35px;
margin-left: 35px;
}
/* nav */
.nav {
width: 540px;
}
.nav li {
float: left;
line-height: 119px;
}
.nav li a {
padding: 15px 35px;
border-radius: 10px;
color: #666;
font-size: 16px;
}
.nav li a:hover {
background: #0667a2;
color: #fff;
}
.nav .shoye {
background: #0667a2;
color: #fff;
}
/* scroll E */
.scroll {
height: 384px;
background: url(../img/scroll.jpg) no-repeat center;
}
.gt,
.gl {
width: 60px;
height: 60px;
background: #33414d;
line-height: 60px;
text-align: center;
margin-top: 162px;
border-radius: 10px;
}
.scroll em {
font-size: 26px;
color: #fff;
}
/* content  E */
.content{
height: 740px;
}
.anli,
.xin  {
position: relative;
height: 175px;
}
.anli img,
.xin img {
position: absolute;
top: 54px;
left: 513px;
}
.anli_tu {
height: 566px;
}
.anli_tu ul {
width: 1230px;
}
.anli_tu ul li {
float: left;
width: 380px;
height: 220px;
margin: 0 30px 30px 0;
}
/* 我们的服务 */
.fuwu {
overflow: hidden;
height: 466px;
background: url(../img/fuwu-tu.jpg) no-repeat center;
}
.fuwu_img {
margin-left: 497px;
margin-top: 48px;
}
.fuwu p {
width: 1080px;
line-height: 31px;
font-size: 18px;
color: #fff;
margin-top: 68px;
}
.fuwu button {
padding: 16px 70px;
font-size: 18px;
border-radius: 10px;
border: none;
color: #fff;
background: #05c468;
margin: 50px 0 0 480px;
}
.xin_tu {
height: 550px;
}
.xin_tu li {
float: left;
width: 380px;
height: 420px;
margin-right: 38px;
}
.xin_tu h4 {
font-size: 18px;
color: #000;
margin: 28px 0 0px 20px;
}
.xin_tu p {
line-height: 25px;
width: 300px;
height: 68px;
padding: 20px;
font-size: 12px;
color: #666666;
}
.xin_tu ul {
width: 1260px;
}
/* content  S */
.toopre {
height: 277px;
background: #f4f4f4;
}
.toopre li {
float: left;
margin: 60px 160px 60px 0;
line-height: 30px;
}
.wum {
font-size: 16px;
color: #000;
font-weight: 700;
}
.toopre li dd a {
font-size: 14px;
color: #878787;
}
.chuan {
height: 60px;
background: #333;
}
.chuan p {
color: #fff;
text-align: center;
}

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 分享经过18天学习后2小时写的网站

0 个回复

浏览过的版块