<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title>项目实战--PC端固定布局</title>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<nav id="nav">

    <section class="center">

        <h1>旅游</h1>

        <ul class="link">

            <li class="active"><a href="###">首页</a></li>

            <li><a href="###">资讯</a></li>

            <li><a href="###">新闻</a></li>

            <li><a href="###">简介</a></li>

        </ul>

    </section>

</nav>

<header>header</header>

<section>body</section>

<footer>footer</footer>

</body>

</html>
@charset "utf-8";

body,h1,ul{

    margin: 0;

    padding: 0;

}

ul{

    list-style: outside none none; //简写属性 在一个声明中设置所有的列表属性。

}

a{

    text-decoration: none; //CSS文字修饰为无；一般用于设置清除超链接的默认下划线：

}

#nav {

    width: 100%;

    height: 70px;

    background-color: #333;

}

.center{

    width: 1263px;

    height: 70px;

    margin: 0 auto;

}

.center h1{

    width: 240px;

    height: 70px;

    text-indent: -9999px;

    float: left;

}

.link{

    width: 650px;

    height: 70px;

    line-height: 70px;

    color: #eee;

    float: right;

}

.link li{

    width: 120px;

    text-align: center;

    float: left;

}

.link a{

    color: #eee;

    display: block; //

}

.link a:hover,

.active a{

    background-color: #000;

}

style.css

css初级代码的更多相关文章

  1. css 初级进阶

    摘自:https://www.jianshu.com/p/dcc40ccc9841 CSS中级 Class和ID选择器 CSS初级教程中我们可以使用HTML标签选择器定义样式. 同样你也可以使用Cla ...

  2. 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码

    1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...

  3. css初始化代码

    最近老有新项目开发,一直在找存留的CSS初始化代码,索性放到这里备份下, @charset "utf-8"; /* -------------------------------- ...

  4. 网站哀悼变灰代码集合 兼容所有浏览器的CSS变暗代码

    下面这些CSS代码可以把网站的网页变为黑白,只需将代码加到CSS文件或网页最顶端就可以实现素装.建议全国站长动起来.为遇难的同胞哀悼. 如何将网站变成灰色调呢,网站变灰色方法是什么?有哪些?为了方便大 ...

  5. CSS透明代码

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5 ...

  6. 各大门户网站的css初始化代码

    腾讯QQ官网 css样式初始 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select ...

  7. CSS颜色代码 颜色值 颜色名字大全(转载)

    CSS颜色代码 颜色值 颜色名字大全 转载处http://flyjj.com/css-colour-code.html 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) ...

  8. CSS颜色代码大全

    CSS颜色代码大全 转载:http://blog.163.com/wujinhongisme@126/blog/static/3613698020095115919389/ RGB ( Red,Gre ...

  9. 兼容主流浏览器的CSS透明代码

    透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class {  filter:alpha(opacity=50);  -moz-opacity:0.5; ...

随机推荐

  1. C#常见的文件路径Api

    我们经常有遇到要处理文件路径的需求,那么一般我们常见的有几种: 程序下面的文件 临时目录下的文件 获取程序下面的文件 首先我们创建了实例解决方案: 其中调用链是:Main.Shell->FooA ...

  2. MySQL备份脚本，应该这么写

    前言: 数据库备份的重要性不言而喻,特别是在生产环境,任何数据的丢失都可能产生严重的后果.所以,无论什么环境,我们都应该有相应的备份策略来定时备份数据库.在 MySQL 中,比较常用的逻辑备份工具是 ...

  3. 网络层协议及ARP攻击

    一:网络层介绍及ICMP协议 1,网络层 网络层位于OSI参考模型的第三层,位于传输层和数据链路层之间.向传输层提供最基本的端到端的数据传送服务.定义了基于IP协议的逻辑地址,连接不同媒介类型,选择数 ...

  4. 低代码平台--基于surging开发微服务编排流程引擎构思

    前言 微服务对于各位并不陌生,在互联网浪潮下不是在学习微服务的路上,就是在使用改造的路上,每个人对于微服务都有自己理解,有用k8s 就说自己是微服务,有用一些第三方框架spring cloud, du ...

  5. 不融资、不上市、不快马圈地…“佛系”ZOHO的中国生意经

    来源:钛媒体 作者:秦聪慧 "技术比肩SAP.直追微软的这家25岁"非典型"国际大厂会继续佛系下去吗? ZOHO研发中心大楼 在中国,有家相对低调的"舶来&qu ...

  6. Nacos服务发现

    基础配置初始化 NacosDiscoveryClientConfiguration NacosDiscoveryProperties 初始化Nacos基础配置信息的bean,主要指yaml中配置Nac ...

  7. 25.Qt Quick QML-500行代码实现"合成大西瓜游戏"

    "合成大西瓜"这个游戏在年前很火热,还上过微博热搜,最近便玩了一阵还挺有意思的,所以研究了一下小球碰撞原理,自己亲自手写碰撞算法来实现一个合成大西瓜游戏.并支持任意大小布局,你想玩 ...

  8. 二进制部署K8S-2集群部署

    二进制部署K8S-2集群部署 感谢老男孩教育王导的公开视频,文档整理自https://www.yuque.com/duduniao/k8s. 因为在后期运行容器需要有大量的物理硬件资源使用的环境是用的 ...

  9. centos7 连接打印机

    centos7 连接打印机 2017-08-07 15:05:33 五岳寻仙客 阅读数 2531更多 分类专栏: Liunx的日常使用   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版 ...

  10. WordPress的config.php不小心删掉

    [原文件] <?php /** * WordPress基础配置文件. * * 这个文件被安装程序用于自动生成wp-config.php配置文件, * 您可以不使用网站,您需要手动复制这个文件, ...