<!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. CF1487 Cat Cycle

    一个规律题目要多做多积累 , 脑子不太灵活 CF1487 Cat Cycle 题目大意: 两只猫A,B, A猫从n -> n-1 -> n-2 ... -> 1 -> 2 .. ...

  2. MyBatis进阶--接口代理方式实现Dao 和动态SQL

    MyBatis接口代理方式实现Dao层 接口代理方式-实现规则 传统方式实现Dao层,我们既要写接口.还要写实现类.而MyBatis框架可以帮助我们省略写Dao层接口实现类的步骤.程序员只需要编写接口 ...

  3. 3.下载CentOS镜像

    下载CentOS镜像 引子: 镜像可以看成是类似ZIP的压缩文件,与rar ZIP压缩包类似,镜像文件是无法直接使用的,需要利用一些虚拟光驱工具 进行解压后才能使用 我们这里就是CentOS系统的镜像 ...

  4. 《Spring 手撸专栏》第 3 章：初显身手，运用设计模式，实现 Bean 的定义、注册、获取

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 你是否能预见复杂内容的设计问题? 讲道理,无论产品功能是否复杂,都有很大一部分程序员 ...

  5. [Java]数据分析--数据可视化

    时间序列 需求:将一组字符顺序添加到时间序列中 实现:定义时间序列类TimeSeries,包含静态类Entry表示序列类中的各项,以及add,get,iterator,entry方法 TimeSeri ...

  6. openstack总结复习

    一.云计算概念 1.云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问, 通过互联网进入可配置的计算资源共享池(资源包括网络,计算,存储,应用软件,服务) 2.云计算所包含的几 ...

  7. 有关Git基础操作的学习

    Git简介 Git是一个免费的开源 分布式版本控制系统,旨在快速高效地处理从小型到大型项目的所有内容. Git 易于学习, 占地面积小,具有闪电般的快速性能.它具有诸如Subversion,CVS,P ...

  8. 在Visual Studio 中使用git——分支管理-上（八）

    在Visual Studio 中使用git--什么是Git(一) 在Visual Studio 中使用git--给Visual Studio安装 git插件(二) 在Visual Studio 中使用 ...

  9. 解决了一个java服务线程退出的问题

    问题背景 ​ 早上才上班,测试就提了一个问题:"昨天所有批量任务都没有跑".我看了一下任务监控页面,任务是有生成的,但却一直在等待调度状态.初步怀疑是我们的调度服务问题,于是上去查 ...

  10. nmap扫描端口导致线上大量Java服务FullGC甚至OOM

    nmap扫描端口导致线上大量Java服务FullGC甚至OOM 最近公司遇到了一次诡异的线上FullGC保障,多个服务几乎所有的实例集中报FullGC,个别实例甚至出现了OOM,直接被docker杀掉 ...