<!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. Python正则表达式的七个使用范例

    本文由 伯乐在线 - 左手的灵魂 翻译.未经许可,禁止转载!英文出处:thegeekstuff.欢迎加入翻译组.http://blog.jobbole.com/74844/ 作为一个概念而言,正则表达 ...

  2. opencv——图像直方图与反向投影

    引言 在图像处理中,对于直方图这个概念,肯定不会陌生.但是其原理真的可以信手拈来吗? 本文篇幅有点长,在此列个目录,大家可以跳着看: 分析图像直方图的概念,以及opencv函数calcHist()对于 ...

  3. 02、SpringBoot2入门

    1.系统要求 Java 8 & 兼容java14 . Maven 3.3+ idea 2019.1.2 1.1.maven设置 <mirrors> <mirror> & ...

  4. 认识 Spring Cloud Alibaba

    个人理解 Spring Cloud Alibaba 就是 Spring Cloud 的微服务规范的一种实现,外加一些阿里云的商业组件 Spring Cloud 是什么 Spring Cloud 为开发 ...

  5. python文件对象几种操作模式区别——文件操作方法详解

    文件对象的字节模式/b模式(以utf-8编码为例) 读操作 写操作 指针操作 ASCII字节 返回bytes/字节类型的Ascii 写入bytes类型字节 例如:b'This is ascii' 使用 ...

  6. Netperf测试技巧

    Netperf测试技巧   Netperf测试技巧 1.概况 Netperf是一种网络性能的测量工具,主要针对基于TCP或UDP的传输.Netperf根据应用的不同,可以进行不同模式的网络性能测试,即 ...

  7. 1.5linux用户权限相关命令

    用户权限相关命令 目标 用户 和 权限 的基本概念 用户管理 终端命令 组管理 终端命令 修改权限 终端命令 01. 用户 和 权限 的基本概念 1.1 基本概念 用户 是 Linux 系统工作中重要 ...

  8. 进程-信号相关 函数-(转自wblyuyang)

    Linux 中的进程: 程序时一个预定义的指令序列,用来完成一个特定的任务. C 编译器可以把每个源文件翻译成一个目标文件,链接器将所有的目标文件与一些必要的库链接在一起,产生一个可执行文件.当程序被 ...

  9. Java核心技术卷阅读随笔--第2章【Java 程序设计环境】

    Java 程序设计环境 本章主要介绍如何安装 Java 开发工具包( JDK ) 以及如何编译和运行不同类型的程序: 控制台程序. 图形化应用程序以及 applet.运行 JDK 工具的方法是在终端窗 ...

  10. 西门子 S7-200 通过以太网通讯模块连接MCGS 通讯

    北京华科远创科技有限研发的远创智控ETH-YC模块,以太网通讯模块型号有MPI-ETH-YC01和PPI-ETH-YC01,适用于西门子S7-200/S7-300/S7-400.SMART S7-20 ...