<!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. redis 未授权访问（写公钥、写计划任务）

    写公钥 ssh-keygen -t rsa # 生成key (echo -e "\n\n"; cat id_rsa.pub; echo -e "\n\n") & ...

  2. 使用git rebase去掉无谓的融合

    git pull 預設的行為是將遠端的 repo. 與本地的 repo. 合併,這也是 DVCS 的初衷,將兩個 branch 合併.但是,很多時候會發生以下這種情形: 這是因為,我們團隊的開發模式是 ...

  3. stm32开发笔记（三）：stm32系列的GPIO基本功能之输出驱动LED灯、输入按键KEY以及Demo

    前言   stm32系列是最常用的单片机之一,不同的版本对应除了引脚.外设.频率.容量等'不同之外,其开发的方法是一样的.  本章讲解使用GPIO引脚功能驱动LED灯和接收Key按钮输入.   STM ...

  4. [bug] CM / CDH 主机运行状态不良情况

    参考 https://blog.csdn.net/fhfkv8644/article/details/82383196 无法发出查询:Host Monitor 未运行 https://blog.csd ...

  5. Linux学习之路-Linux-at及cron命令【7】---20171215

    Linux学习之路-Linux-at及cron命令[7]---20171215 DannyExia000人评论986人阅读2017-12-24 17:28:03   ntpdate 命令 [root@ ...

  6. 云计算OpenStack核心组件---keystone身份认证服务（5）

    一.Keystone介绍: keystone 是OpenStack的组件之一,用于为OpenStack家族中的其它组件成员提供统一的认证服务,包括身份验证.令牌的发放和校验.服务列表.用户权限的定义等 ...

  7. 【玩转PDF】贼稳，产品要做一个三方合同签署，我方了！

    一.前言 事情是这个样子的,小农的公司,之前有个功能需要签署来进行一系列的操作,于是我们引入了一个三方平台的签署--上上签,但是有一个比较尴尬的点就是,它不支持合同在浏览器上和附件一起预览的,我们想要 ...

  8. 一：windows10开启虚拟化服务(也可用于部署docker提前准备)

    查看虚拟化已开启: 如果未启用,则需要添加虚拟化功能:控制面板 -> 启用或关闭Windows功能 选择Hyper-V的所有功能,确定: 系统会自动搜索并安装功能.安装完毕即可. 完结,撒花~~

  9. 多目标跟踪：CVPR2019论文阅读

    多目标跟踪:CVPR2019论文阅读 Robust Multi-Modality Multi-Object Tracking  论文链接:https://arxiv.org/abs/1909.0385 ...

  10. Harmony生命周期

    Harmony生命周期 系统管理或用户操作等行为,均会引起Page实例在其生命周期的不同状态之间进行转换.Ability类提供的回调机制能够让Page及时感知外界变化,从而正确地应对状态变化(比如释放 ...