web前端网页设计制作_网页制作教程

web前端网页设计制作_网页制作教程简易旅游网,静态网页制作页面效果

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

简易旅游网,静态网页制作

页面效果

web前端网页设计制作_网页制作教程 

web前端网页设计制作_网页制作教程 

代码如下

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css" </head>

    <body>
        <div class="header con">
            <div class="photo"></div>
            <div class="headerlist">
                <ul>
                    <li><a class="active">介绍</a></li>
                    <li><a>天气</a></li>
                    <li><a class="active">地图</a></li>
                    <li><a>交通</a></li>
                    <li><a class="active">周边酒店</a></li>
                    <li><a class="last">周边景点</a></li>
                </ul>
                <div class="serch">
                    <input type="text" placeholder="搜索">
                </div>
            </div>
        </div>
        <div class="nav">
            <ul class="con">
                <li>首页</li>
                <li>门票</li>
                <li>旅游点评</li>
                <li>景点大全</li>
                <li>资讯</li>
                <li>关于我们</li>
            </ul>
        </div>
        <div class="banner"></div>
        <div class="list con">
            <div class="item">
                <img src="../图片/OIP-C.jpg">
                <p>2022年的开端</p>
            </div>
            <div class="item">
                <img src="../图片/Default.jpg">
                <p>背起行囊去远方</p>
            </div>
            <div class="item">
                <img src="../图片/th.jpg">
                <p>电影中的世外桃源</p>
            </div>
        </div>
        <div class="footer">
            <div class="con">
                <ul>
                    <li>网站导航</li>
                    <li>旅游攻略</li>
                    <li>自由行</li>
                    <li>写游记</li>
                    <li>酒店预订</li>
                    <li>订火车票</li>
                    <li>旅游指南</li>
                    <li>APP下载</li>
                    <li>网站地图</li>
                    <li>联系我们</li>
                    <li>隐私政策</li>
                    <li>服务协议</li>
                </ul>
                <p>全球旅游服务售后热线<span>888888-888888</span></p>
            </div>
        </div>
    </body>

</html>
* {
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}

.con {
    width: 966px;
    margin: 0 auto;
}

.header {
    height: 110px;
}

.photo {
    width: 165px;
    height: 110px;
    background: url(../图片/logo.png);
    float: left;
    background-position: center;
    background-size: 100% 100%;
}

.headerlist {
    float: right;
}

.headerlist ul {
    height: 44px;
    margin-top: 10px;
    line-height: 44px;
}

.headerlist li {
    float: left;
}

.headerlist a {
    border-right: 1px solid #b2c7ea;
    padding-left: 13px;
    padding-right: 13px;
    font-size: 13px;
    color: indigo;
}

.headerlist .last {
    border: 0;
    padding-right: 0;
}

.headerlist li .active {
    color: pink;
}

.serch {
    float: right;
    width: 234px;
    height: 28px;
    border: 1px solid indigo;
}

.serch input {
    border: 0;
    outline: none;
    width: 210px;
    float: left;
    height: 28px;
    padding-left: 14px;
}

.nav {
    height: 53px;
    line-height: 53px;
    border-top: 1px solid #edf4fc;
    background-color: #274964;
    color: aliceblue;
}

.nav li {
    float: left;
    font-size: 16px;
    padding-right: 76px;
}

.banner {
    height: 380px;
    background: url(../图片/Sunrise.jpg) no-repeat center;
    background-size: cover;
}

.list {
    height: 213px;
    margin-top: 51px;
    margin-bottom: 35px;
}

.item {
    height: 211px;
    width: 305px;
    border: 1px solid #cccccc;
    float: left;
    margin-right: 12px;
}

.item img {
    width: 305px;
    height: 165px;
    display: block;
}

.item p {
    height: 47px;
    padding-left: 28px;
    line-height: 47px;
    color: #274964;
}

.footer {
    height: 206px;
    border-top: 1px solid cornsilk;
    background-color: #cccccc;
}

.footer ul {
    height: 84px;
    padding-top: 30px;
    padding-bottom: 30px;
    line-height: 28px;
    border-bottom: 1px solid gray;
}

.footer ul li {
    width: 210px;
    padding-left: 30px;
    font-size: 12px;
    float: left;
    color: indigo;
}

.footer p {
    height: 61px;
    line-height: 61px;
    padding-left: 30px;
    font-size: 12px;
}

.footer p span {
    color: indigo;
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/183837.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • PyCharm找不到解释器no python interpreter configured[通俗易懂]

    PyCharm找不到解释器no python interpreter configured[通俗易懂]安装好PyCharm之后,新建或者导入项目碰到找不到解释器的情况,不用担心,追根到底,咱们就是需要找到pycharm*.exe的文件,那么这个文件在哪里呢?这是个问题。先打开File–>Setting–>Project,这时候看到选中栏显示的是Nointerpreter,在哪里找这个文件呢,不妨打开磁盘,直接搜索python.exe文件可能在C盘,也可能在其他磁盘,楼主找到的这…

  • 数据库还原失败System.Data.SqlClient.SqlError: 无法执行 BACKUP LOG,因为当前没有数据库备份「建议收藏」

    数据库还原失败System.Data.SqlClient.SqlError: 无法执行 BACKUP LOG,因为当前没有数据库备份「建议收藏」结尾日志的问题还原选择中去掉结尾日志就可以了原文地址:http://www.tnblog.net/aojiancc2/article/details/188

  • ODB学习笔记之基础环境搭建

    ODB学习笔记之基础环境搭建一,简介ODB是应用于C++的一个开源、跨平台、跨数据库的对象关系映射(ORM)系统。它可以让你持久化C++对象到关系数据库,而不必处理表、列或者SQL,无需手动编写任何映射代码。ODB支持My

  • Nginx配置Https并进行Http强制跳转Https

    Nginx配置Https并进行Http强制跳转Https

  • siamFC_silvahound

    siamFC_silvahound一SiamFC++网络结构及处理流程如下:注意大多数算法对于分类损失都采用交叉熵损失,而SiamFC++在分类分支中计算cls_score与center-nessscore采用了不同的损失函数,cls_score采用focalloss,这样做是为了缓解正负样本不均衡问题;center-nessscore则采用交叉熵loss。最终用这两部分对应元素相乘得到的结果得到更加合理的分类结果,center_ness的作用就是对每一个正样本位置施加权重,离中心进的权重高,离中心远的权重低使得分类更加合

  • Tomcat学习—Tomcat7 修改/webapps/ROOT发布路径(Linux和windows环境)

    在web开发中经常使用到的一个容器就是Tomcat,大多数人在本地开发使用的是windows 环境,而当项目真正远行,一般就是在Linux服务器上。下面主要讲解Linux服务器上修改Tomcat部署应用程序的发布路径! 现在应用服务器上用的笔记多的还是Tomcat7,就以Tomcat为例!Tomcat7和之前的版本一样,默认发布程序是在$Tomcat/webapp/ROOT 下面,就是当我们启动T

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号