网站头部搭建例子

作者: 富有的心 | 来源:发表于2017-11-14 18:26 被阅读0次

网站头部搭建例子
Angular+Node+Python快速建站
网络安全之用phpstudy搭建php网站stru2框架搭建，j
Flutter Web网站之最简方式实现暗黑主题无缝切换
Flutter Web网站之ScrollView+GridVie
Flutter Web网站之Markdown展示与博客列表
网络安全-Day3-搭建 asp、aspx网站（2020/02/
做优化设不但要有合理的网站结构，还要有科学的关键词布局
bc网站游戏建设开发
Windows 服务器用IIS搭建网站详细教程

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>公司网站</title>
    <style type="text/css">
        *{font-family: "宋体",Arial, Helvetica, sans-serif;}
        #header{
            width: 917px;
            height: 115px;
            /*居中*/
            margin: 0 auto;
            background: url(imageswangzhan/img2.gif) repeat-x;
        }
        #logo{
            float: left;
            height: 115px;
            /*上、右、下、左*/
            padding: 0 0 0 0;
            background: url(imageswangzhan/img1.gif) no-repeat;

        }
        #logo h1{
            float: left;
            padding: 50px 0 0 40px;
            font-size: 36px;
        }
        #logo h1 a{color: #000000}
        #logo h2{
            float: left;
            padding: 72px 0 0 8px;
            font-size: 12px;
            border: none;
        }
        /*选择器类型决定它的前缀 ，中间只需加空格就可以了*/
        #logo h2 a{color: #B4B4B4}
        #menu{
            float: right;
            height: 45px;
            padding: 70px 25px 0 0;
/* background的属性见图一*/
            background: url(imageswangzhan/img3.gif) no-repeat right top;
        }
        #menu ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #menu li{
            display: inline;
        }
        #menu a{
            padding: 0 15px 0 20px;
            /*width,style,color的顺序*/
            border-left: 1px solid #DBDBDB;
            /*转化小写*/
            text-transform: lowercase;
            text-decoration: none;;
            font-size: 13px;
            color: #3B3B3B;
        }
        #menu .first a{
            border: none;
        }
        #splash{
            width: 877px;
            height: 170px;
            margin: 0 auto;
            background: url(imageswangzhan/img5.gif) no-repeat;
            border-right: 20px solid #FFFFFF;
            border-left: 20px solid #FFFFFF;
        }
        body{
            margin: 30px 0;
            padding: 0;
            background: #EFEFEF;
            font-size: 12px;
            color: #000000;
        }
        h1,h2{
            margin: 0;
            padding: 0;
            text-transform: lowercase;
            /*字体的粗细*/
            font-weight: normal;
            color: #000000;
        }
        h2{
            margin-bottom: 10px;
            border-bottom: 1px solid #F4F4F4;
            font-size: 26px;
        }
        ul{
            margin-left: 0;
            padding-left: 0;
            list-style: none;
        }
        a{
            color: #EC5600;
        }
        a.hover{text-decoration: none;}
        img{border: none;}
    </style>
</head>
<body>
    <div id="header">
        <div id="logo">
            <h1>公司网站</h1>
            <h2><a href="#">健康新生活从我们开始</a></h2>
        </div>
        <div id="menu">
            <ul>
            <!-- <li> 标签支持 HTML 中的全局属性 -->
                <li class="first"><a href="#" accesskey="1" title="">首页</a></li>
                <li><a href="#" accesskey="2" title="">公司简介</a></li>
                <li><a href="#" accesskey="3" title="">产品列表</a></li>
                <li><a href="#" accesskey="4" title="">关于我们</a></li>
                <li><a href="#" accesskey="5" title="">联系我们</a></li>
            </ul>
        </div>
    </div>
    <div id="splash"><a href="#"><img src="imageswangzhan/img4.jpg" alt="" width="877" height="140"></a></div>
</body>
</html>