CSS3实战网页设计(2)

最新推荐文章于 2023-06-17 14:13:56 发布

蜗牛杨哥

最新推荐文章于 2023-06-17 14:13:56 发布

阅读量427

点赞数

本文链接：https://blog.csdn.net/u014635374/article/details/118799951

版权

html源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天马行空设计室</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style/css3-6.css" rel="stylesheet" type="text/css" />
    <link href="style/div3-6.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        <!--
        function MM_swapImgRestore() { //v3.0
            let i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
        }
        function MM_preloadImages() { //v3.0
            let d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                let i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
        }

        function MM_findObj(n, d) { //v4.01
            let p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
            if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
            for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
            if(!x && d.getElementById) x=d.getElementById(n); return x;
        }

        function MM_swapImage() { //v3.0
            let i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
                if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
        }
        //-->
    </script>
</head>
<body onload="MM_preloadImages('images/2.png','images/3407.png')">
<div id="box">
    <div id="top">
        <div id="top-1"> <img src="images/3403.png" width="322" height="103" /></div>
        <div id="top-2"><img src="images/button.png" width="88" height="20" /></div>
    </div>
    <div id="top2">
        <ul>
            <li>主页</li><li>公司简介</li><li>投资组合</li><li>联系我们</li><li>社区论坛</li><li>成功案例</li>
        </ul>
    </div>
    <div id="main">
        <img src="images/3405.jpg" width="960" height="300" />
        <div id="main-1"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/3407.png',1)"><img src="images/3408.png" name="Image9" width="187" height="96" border="0" id="Image9" /></a><img src="images/3409.png" width="185" height="96" /><img src="images/3410.png" width="192" height="96" /><img src="images/3411.png" width="192" height="96" /><img src="images/3412.png" width="192" height="96" /></div>
    </div>
    <div id="main2">
        <div id="main2-1"><span class="font01">网站类型套餐参考</span><br />
            <div id="text1">
                企业宣传型网站风格简约，针对中小型企业，制作精良，专为追求最佳性价比的中小型企业定制，网站功能实用，以产品宣传为主。
            </div>
            <div id="text2">  商务型系列的设计能够让您的客户或潜在客户在第一时间内对您的公司产生非常信任的感觉，为您的电子商务起到事半功倍的效果。
            </div>
            <div id="text3"> 商务型系列适用于中型企业网站建设，以较高的界面设计，功能互动来实现网站的交互性。
            </div>
        </div>
        <div id="main2-2">
            <img src="images/2413.jpg" width="300" height="228" />
        </div>
        <div id="main2-3">
            <p class="font01">务实创新</p>
            <p> 　　以务实创新精神理念,服务与满足不同用户需求，追求精品；</p>
            <p class="font01">成人达已</p>
            <p>　　为客户提供高品质的服务，最大限度地满足客户的需求，携手共创“双赢”；</p>
            <p class="font01">成就客户价值观</p>
            <p>　　让客户满意是不够的，为客户的服务和需求的满足，不间断追求不间断服务，真诚会客忠诚待客方能与客成为忠诚可靠的合作伙伴。</p>
        </div>
        <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/2.png',1)"></a></div>
    <div id="bottom">
        <div id="bottom01">
            <p>&nbsp;</p>
            <p>天空设计工作室没有什么我们不能做<br />
                业务专用邮箱：Sky@china-ncw.com 联系电话：010-89888888 010-00000000 <br />
                Copyright © 2020 托普朗宁(北京)教育科技有限公司 All Right Reserved V2.0 </p>
        </div>
    </div>
</div>
</body>
</html>

// css3-6.css 样式表
@charset "utf-8";
/* CSS Document */
*{
    margin:0px;
    border:0px;
    padding:0px;
}
body{
    background-image:url(../images/3401.png);
    background-repeat:repeat-x;
    font-family:"宋体";
    font-size:12px;
    color:#666666;
    line-height:19px;
}
.font01 {
    color:#144c81;
    font-size:18px;
    font-family:"微软雅黑";
    line-height:30px;
}

//div3-6.css 样式表
@charset "utf-8";
/* CSS Document */
#box {
    width:100%;
    height:947px;
    background-image:url(../images/3404.png);
    background-repeat:no-repeat;
    background-position:center 187px;
}
#top {
    padding-top: 8px;
    margin:auto;
    width:960px;
    height:106px;
    background-image:url(../images/3402.png);
    background-repeat:no-repeat;
}
#top-1 {
    width:322px;
    height:103px;
    float:left;
}
#top-2 {
    width:88px;
    height:20px;
    margin:40px 10px 0px 0px;
    float:right;
}
#top2 {
    margin:auto;
    width:960px;
    height:40px;
    font-family:"微软雅黑";
    font-size:18px;
    color:#144c81;
}
#top2 li {
    width:100px;
    height:25px;
    float:left;
    list-style-type:none;
    text-align:center;
    margin-top:10px;
}
#main {
    margin:auto;
    width:960px;
    height:417px;
}
#main-1 {
    margin-top:20px;
    width:960px;
    height:96px;
}
#main2 {
    margin:auto;
    width:960px;
    height:256px;
    background-image:url(../images/3406.png);
    background-repeat:no-repeat;
}
#main2-1 {
    width:300px;
    height:256px;
    margin:0px 10px 0px 10px;
    float:left;
}
#text1 {
    width:260px;
    height:68px;
    padding-left:40px;
    background-image:url(../images/d1.png);
    background-repeat:no-repeat;
}
#text2 {
    width:260px;
    height:68px;
    padding-left:40px;
    background-image:url(../images/d2.png);
    background-repeat:no-repeat;
}
#text3 {
    width:260px;
    height:68px;
    padding-left:40px;
    background-image:url(../images/d3.png);
    background-repeat:no-repeat;
}
#main2-2 {
    width:300px;
    height:256px;
    margin:0px 10px 0px 10px;
    float:left;
}
#main2-3 {
    width:300px;
    height:256px;
    margin:0px 10px 0px 10px;
    float:left;
}
#bottom {
    width:100%;
    height:100px;
    background-color:#185488;
    color:#fff;
    text-align:center;
    line-height:20px;
    margin-top:20px;
}
#bottom01 {
    width:960px;
    height:100px;
    margin:auto;
}
#bottom01 span {
    margin:0px 5px 0px 5px;
}

效果图如下：

蜗牛杨哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
10
评论
CSS3实战网页设计(2)

html源代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>天马行空设计室</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href=...
复制链接

扫一扫