自己个人网页代码

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大连</title>
    <link rel="stylesheet" href="css17dian/17dian.css">
    <link rel="stylesheet" href="css17dian/base17dian.css">
</head>
<body>
<!--头部 start-->
<div class="nav">
    <ul>
        <li class="dl"><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>![](img/timg.jpg)</li>
    </ul>
</div>
<!--头部 end-->

<!--大图 start-->
<div class="ball">
    ![](img/ball.jpg)
</div>
<!--大图 end-->

<!--简介 start-->
<div class="summary"> 
    <h2>大连简介</h2>
    <p>
        <ul>
            <li><span>01.</span>大连，位于中国辽东半岛最南端，是中国东部沿海重要的经济、贸易、港口、工业、<a href="">旅游</a>城市。</li>
            <li><span>02.</span>大连市位于北半球的暖温带地区，具有海洋性特点的暖温带大陆性季风气候，是东北地区最温暖的地方，冬无严寒，夏无酷暑，四季分明。</li>
            <li><span>03.</span>大连有<a href="">“东北之窗”</a><a href="">“ 北方明珠 ”</a><a href="">“浪漫之都”</a>之称。大连宜居指数在全国40个城市中排名第四</li>
            <li><span>04.</span>大连市共辖7个涉农区市县，包括庄河、普兰店、瓦房店市，金州、甘井子、旅顺口区和长海县，还有高新园区、保税区、长兴岛开发区、花园口经济区等4个国家级对外开放先导区</li>
        </ul>
    </p>
</div>
<!--简介 end-->

<!--美景 start-->
<div class="view">
    <h2>美丽大连，美丽景色</h2>
    <h2>Beautiful DL,Beautiful VIEW</h2>
    <ul>
        <li>
            <a href="">![](view/view1.jpg)</a>
            <a href="" class="dl">金石狩猎俱乐部</a>
        </li>
        <li>
            <a href="">![](view/view2.jpg)</a>
            <a href="" class="dl">圣谷美地漂流</a>
        </li>
        <li>
            <a href="">![](view/view3.jpg)</a>
            <a href="" class="dl">林海滑雪场</a>
        </li>
        <li>
            <a href="">![](view/view4.jpg)</a>
            <a href="" class="dl">苏军烈士陵园</a>
        </li>
        <li>
            <a href="">![](view/view5.jpg)</a>
            <a href="" class="dl">旅顺海军兵器馆</a>
        </li>
        <li>
            <a href="">![](view/view6.jpg)</a>
            <a href="" class="dl">龙塘水库樱花园</a>
        </li>
    </ul>
</div>
<!--美景 end-->

<!--美食 start-->
<div class="food">
    <h2>美丽大连，美食天下</h2>
    <h2>Beautiful DL,Delicious FOOD</h2>
    <ul>
        <li>
            <a href="">![](food/food1.jpg)</a>
            <a href="" class="dl">深海野生鲍鱼</a>
        </li>
        <li>
            <a href="">![](food/food2.jpg)</a>
            <a href="" class="dl">天然大飞蟹</a>
        </li>
        <li>
            <a href="">![](food/food3.jpg)</a>
            <a href="" class="dl">野生滋补海参</a>
        </li>
        <li>
            <a href="">![](food/food4.jpg)</a>
            <a href="" class="dl">新鲜大扇贝</a>
        </li>
        <li>
            <a href="">![](food/food5.jpg)</a>
            <a href="" class="dl">蚬子，肉串</a>
        </li>
        <li>
            <a href="">![](food/food6.jpg)</a>
            <a href="" class="dl">海鱼烧烤</a>
        </li>
    </ul>
</div>
<!--美食 end-->

<!--美女 start-->
<div class="women">
    <h2>美丽大连，盛产美女</h2>
    <h2>Beautiful DL,Gorgeous WOMEN</h2>
    <ul>
        <li>
            <a href="">![](women/women1.jpg)</a>
            <a href="" class="dl">美女人民教师</a>
        </li>
        <li>
            <a href="">![](women/women2.jpg)</a>
            <a href="" class="dl">美女银行行员</a>
        </li>
        <li>
            <a href="">![](women/women3.jpg)</a>
            <a href="" class="dl">美女大学生</a>
        </li>
        <li>
            <a href="">![](women/women4.jpg)</a>
            <a href="" class="dl">修炼自我的必修课</a>
        </li>
        <li>
            <a href="">![](women/women5.jpg)</a>
            <a href="" class="dl">最美空姐</a>
        </li>
        <li>
            <a href="">![](women/women6.jpg)</a>
            <a href="" class="dl">帅气的女子军队</a>
        </li>
    </ul>
</div>
<!--美女 end-->

<!--合作区 start-->
<div class="footer">
        <fieldset>
            <form action="">
                <input type="text" name="q" class="q" value="圣亚极地海洋世界">
                <input type="submit" class="search-btn" value="搜索">
            </form>
            <ul>
                <li><a href="">大连发现王国</a></li>
                <li><a href="">大连星海广场</a></li>
                <li><a href="">大连老虎滩</a></li>
            </ul>
        </fieldset>
        <dl>
            <dt>首页</dt>
            <dd><a href="">简介</a></dd>
            <dd><a href="">地图</a></dd>
            <dd><a href="">四季</a></dd>
            <dd><a href="">导游</a></dd>
            <dd><a href="">四季</a></dd>
            <dd><a href="">导游</a></dd>
            <dd><a href="">地图</a></dd>
            <dd><a href="">地图</a></dd>
            <dd><a href="">地图</a></dd>
            <dd><a href="">地图</a></dd>
            <dd><a href="">地图</a></dd>
        </dl>
        <dl class="scene">
            <dt>美景</dt>
            <dd><a href=""></a></dd>
            <dd><a href="">庄河</a></dd>
            <dd><a href="">普兰店</a></dd>
            <dd><a href="">金州</a></dd>
            <dd><a href="">甘井子</a></dd>
            <dd><a href="">瓦房店市</a></dd>
            <dd><a href="">旅顺口区</a></dd>
            <dd><a href="">长海县</a></dd>
            <dd><a href="">高新园区</a></dd>
            <dd><a href="">保税区</a></dd>
            <dd><a href="">长兴岛开发区</a></dd>
            <dd><a href="">花园口经济区</a></dd>
        </dl>
        <dl class="cate">
            <dt>美食</dt>
            <dd><a href="">海参</a></dd>
            <dd><a href="">鲍鱼</a></dd>
            <dd><a href="">海鱼</a></dd>
            <dd><a href="">蚬子</a></dd>
            <dd><a href="">扇贝</a></dd>
            <dd><a href="">螃蟹</a></dd>
            <dd><a href="">鱿鱼</a></dd>
            <dd><a href="">螃蟹</a></dd>
            <dd><a href="">大虾</a></dd>
        </dl>
        <dl class="cate">
            <dt>美女</dt>
            <dd><a href="">董洁</a></dd>
            <dd><a href="">孙莉</a></dd>
            <dd><a href="">余男</a></dd>
            <dd><a href="">娄艺潇</a></dd>
            <dd><a href="">林鹏</a></dd>
            <dd><a href="">韩雯雯</a></dd>
            <dd><a href="">金玫玫</a></dd>
            <dd><a href="">韩雯雯</a></dd>
            <dd><a href="">娄艺潇</a></dd>
            <dd><a href="">韩雯雯</a></dd>
        </dl>
        <dl class="support">
            <dt>支持</dt>
            <dd><a href="">客服中心</a></dd>
            <dd><a href="">帮助中心</a></dd>
        </dl>
        <dl class="about-us">
            <dt>分类</dt>
            <dd><a href="">美丽大连</a></dd>
            <dd><a href="">美丽大连</a></dd>
            <dd><a href="">美丽大连</a></dd>
            <dd><a href="">美丽大连</a></dd>
            <dd><a href="">美丽大连</a></dd>
        </dl>
        <div class="cb"></div>
</div>
<!--合作区 end-->
</body>
</html>

css部分

@charset "utf-8";
/*公共部分 start*/
a{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
/*公共部分 end*/


/*头部 start*/
.nav{
    width: 1440x;
    height: 90px;
    background-color: #cef0ef;
}
.nav ul{
    padding-top: 30px;
    margin-left: 100px;
}
.nav li a{
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 20px;
    color: #666;
    float: left;
}
.nav li.dl a{
    font-size: 30px;
    font-family: '楷书';
    font-weight: bold;
    color: #332626;
}
.nav li img{
    width: 160px;
    height: 50px;
    float: right;
    padding-right: 40px;
    padding-bottom: 10px;
}
/*头部 end*/


/*大图 start*/
.ball img{
    width: 1360px;
    height: 500px;
}
/*大图 end*/


/*简介 start*/
.summary{
    width: 1360px;
    height: 180px;
    background-color: #cef0ef;
    position:relative;
}
.summary h2{
    width: 1330px;
    height: 30px;
    line-height: 30px;
    font-size: 30px;
    font-family: '楷书';
    position:absolute;
    top: 10px;
    left: 15px;
}
.summary ul{
    padding-top: 50px;
    padding-left: 30px;
}
.summary li{
    height: 30px;
    line-height: 30px;
}
.summary li span{
    display:inline-block;
    width: 20px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border: 1px solid #666;
}
/*简介 end*/


/*美景 start*/
.view{
    height: 800px;
    padding-top: 20px;
    background: #cef0ef;
    border-top: 1px dashed #666;
    padding-bottom: 10px;
}
.view h2{
    width: 1330px;
    height: 60px;
    line-height: 100px;
    font-size: 50px;
    font-family: '楷体';
    text-align: center;
    padding-bottom: 15px;
}
.view ul{

}
.view li{
    float: left;
    position: relative;
}
.view ul img{
    width: 430px;
    height: 300px;
    border: 3px solid #ddd;
    padding: 7px;
}
.view ul a{
    display:inline-block;
}
.view li a.dl{
    position:absolute;
    right: 12px;
    bottom: 10px;
    font-size: 20px;
    color: white;
    background: black;
    opacity: 0.6;
}
.view a:hover img{
    border-color:#02a1d9;
}
/*美景 end*/


/*美食 start*/
.food{
    height: 800px;
    padding-top: 20px;
    background: #cef0ef;
    padding-bottom: 10px;
}
.food h2{
    width: 1330px;
    height: 60px;
    line-height: 100px;
    font-size: 50px;
    font-family: '楷体';
    text-align: center;
    padding-bottom: 15px;
}
.food ul{

}
.food li{
    float: left;
    position: relative;
}
.food ul img{
    width: 430px;
    height: 300px;
    border: 3px solid #ddd;
    padding: 7px;
}
.food ul a{
    display:inline-block;
}
.food li a.dl{
    position:absolute;
    right: 12px;
    bottom: 10px;
    font-size: 20px;
    color: white;
    background: black;
    opacity: 0.6;
}
.food a:hover img{
    border-color:#02a1d9;
}
/*美食 end*/

/*美女 start*/
.women{
    height: 800px;
    padding-top: 20px;
    background: #cef0ef;
    padding-bottom: 10px;
}
.women h2{
    width: 1330px;
    height: 60px;
    line-height: 100px;
    font-size: 50px;
    font-family: '楷体';
    text-align: center;
    padding-bottom: 15px;
}
.women ul{

}
.women li{
    float: left;
    position: relative;
}
.women ul img{
    width: 430px;
    height: 300px;
    border: 3px solid #ddd;
    padding: 7px;
}
.women ul a{
    display:inline-block;
}
.women li a.dl{
    position:absolute;
    right: 12px;
    bottom: 10px;
    font-size: 20px;
    color: white;
    background: black;
    opacity: 0.6;
}
.women a:hover img{
    border-color:#02a1d9;
}
/*美女 end*/

/*页脚 start*/
.footer form{
    width:394px;
    height:27px;
    border:3px solid #eeeeee;
}
.q{
    width:320px;
    height:25px;
    line-height:25px;
    border:1px solid #babebf;
    border-right:0 none;
    outline:none;
    color:#999999;
    padding-left:5px;
    float:left;
}
.search-btn{
    width:68px;
    height:27px;
    background:url(../images1/headerpage.png) 0px -36px;
    outline:none;
    border:0 none;
    color:black;
    font-size:14px;
    font-weight:bold;
    float:left;
}
.search p{
    height:68px;
    text-align: right;
    padding-top:40px;
    color:#e6e6e6;
    line-height:20px;
}
.footer{
    height: 200px;
    padding-top:15px;
    padding-top:25px;
    padding-left: 60px;
    background: #cef0ef;
}
.footer fieldset{
    margin-left:260px;
    margin-bottom:16px;
}
.footer ul li{
    line-height:27px;
    float:left;
    display: inline;
}
.footer ul li a{
    font-size: 12px;
    color:#a9a9a9;
    margin:0 8px;
}
.footer dl{
    height: 82px;
    width:200px;
    padding-left:20px;
    border-right: 1px solid #dddddd;
    float: left;
    display:inline;
}
.footer dt{
    line-height: 30px;
    color:#666666;
    font-weight: bold;
}
.footer dd{
    line-height: 22px;
    margin-right:10px;
    float: left;
    display:inline;
    white-space:nowrap;/*禁止文字换行*/
}
.footer dd a{
    font-size: 12px;
}
.footer .category{
    width:180px;
}
.footer .app{
    width:235px;
}
.footer .support{
    width:60px;
}
.footer .about-us{
    width:197px;
    border:0 none;
}
/*页脚 end*/

最后编辑于：2017.12.05 22:10:52

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,047评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,807评论 3赞 386
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,501评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,839评论 1赞 285
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,951评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,117评论 1赞 291
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,188评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,929评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,372评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,679评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,837评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,536评论 4赞 335
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,168评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,886评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,129评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,665评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,739评论 2赞 351

自己个人网页代码

html部分

css部分

推荐阅读更多精彩内容