自己个人网页代码

作者: IT颖儿 | 来源:发表于2017-02-19 11:50 被阅读0次

自己个人网页代码
2018-03-31
浏览器环境概述
个人博客网页设计模板
爬取搜狗图片小试
polo360练习
JS和java代码相互调用的一个线程问题
Python学习笔记1
Python爬取图片2——爬取多个网页图片
京东登陆界面

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*/

自己个人网页代码
html部分 css部分
2018-03-31
网页总结网页代码
浏览器环境概述
JavaScript代码嵌入网页的方法 JavaScript代码只有嵌入网页，才能在用户浏览网页时运行。网页中嵌...
个人博客网页设计模板
/ 前话 / 纯手工敲代码，代码结构简单，div+css布局html静态个人博客首页网页设计，dreamwaver...
爬取搜狗图片小试
一，分析网页源代码；二模拟请求操作；三解析网页内容；四，下载存储图片到自己要保存的路径代码： cmd+alt+L...
polo360练习
网页：代码：
JS和java代码相互调用的一个线程问题
网页调用java代码时，所调用的方法运行在子线程中。网页代码 Java代码 js和java代码通过mWebVie...
Python学习笔记1
整了个网页代码：心得：基本了解网页构成
Python爬取图片2——爬取多个网页图片
网页效果代码
京东登陆界面
css 网页代码