css 样式小窍门

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>页面分布</title>

    <style>

        body {

            margin: ;  /*让整个页面的边距消失*/

        }

        .pg-head {

            height: 40px;

            background-color: dodgerblue;

            line-height: 30px;   /*调整这个标签里面中的文字水平的位置*/

        }

        .w{

            width: 760px;

            margin:   auto; /*居中*/

        }

        ul{

            margin: ;

            list-style-type: none;

        }

        ul li {

            float: left;

            padding: 20px  20px;

            cursor: pointer;

            margin-top: 4px;

            font-size: 5px;

        }

         ul li:hover{    /*伪类,当鼠标移动当该标签上时自动应用此效果*/

             background-color: darkblue;

         }

    </style>

</head>

<body>

    <div class="pg-head">

        <div class="w">

            <ul>

                <li>菜单一</li>

                <li>菜单二</li>

                <li>菜单三</li>

            </ul>

        </div>

    </div>

    <div class="pg-body"></div>

    <div class="pg-footer"></div>

</body>

</html>

css 样式小窍门的更多相关文章

  1. css样式小技巧

    1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...

  2. css样式小框架

    1.如div{...}会给所有的<div></div>增加样式. 2.名前井号“#”:对应html中的标签的id属性,写法为#name.如#p1{...}会给<p id= ...

  3. select自定义下拉三角符号,css样式小细节

    本来没有写文章的习惯,但是闲下来了,整理资料,发现还挺纠结,对前端来说.所以整理下,希望对看到的人有所帮助,毕竟我不是前端开发. 起因,是前端告诉我select 框的三角箭头不能自定义.但是第二次的时 ...

  4. CSS 样式显示为小手

    因为工作需要把鼠标放上去显示小手形状, css样式如下: style="cursor:hand"    部分浏览器支持 style="cursor:pointer&quo ...

  5. WebStorm 配置微信小程序开发 用html样式打开wxml 用css样式打开wxss 配置微信小程序提醒

    1.点开preferences 2.搜索找到“File Types” 3.找到"HTML",点击“+”按钮,添加“*.wxml”然后“apply” 4.和3一样,再找到 ‘casc ...

  6. 微信小程序的布局css样式

    微信小程序的布局css样式width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-w ...

  7. Django 小实例S1 简易学生选课管理系统 12 CSS样式完善

    Django 小实例S1 简易学生选课管理系统 第12节--CSS样式完善 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 课程模块的逻辑代码到这里 ...

  8. Django 小实例S1 简易学生选课管理系统 8 CSS样式优化

    Django 小实例S1 简易学生选课管理系统 第8节--CSS样式优化 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 前面的几节下来,用户模块基 ...

  9. CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式

    最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的, ...

随机推荐

  1. 2018CCPC吉林赛区（重现赛）

    http://acm.hdu.edu.cn/contests/contest_show.php?cid=867 A题,直接分块,不知道正解是什么. #include<bits/stdc++.h& ...

  2. Little Sub and Mr.Potato's Math Problem （构造法）

    题目传送门Little Sub and Mr.Potato's Math Problem Time Limit: 2 Seconds      Memory Limit: 65536 KB Littl ...

  3. Node.js--fs 文件操作

    process 模块 在使用的时候无需通过 require() 函数来加载该模块,可以直接使用. fs 模块,在使用的时候,必须通过 require() 函数来加载该模块,方可使用. 原因:proce ...

  4. openstack stein部署手册 2. 基础应用

    1. chrony # 安装程序包 yum install -y chrony # 变更配置文件 /etc/chrony.conf 增加 server 192.168.123.200 iburst # ...

  5. ES6 的基础教程

    一.介绍 1.历史 ECMAScript和JavaScript ECMA是标准,JS是实现 类似于HTML5是标准,IE10.Chrome.FF都是实现 换句话说,将来也能有其他XXXScript来实 ...

  6. python控制cpu使用率

    以下亲测可行. 使用方法:命令行模式 runing.py -c 2 -t 0.01 -c 指定cpu核数:不指定-c参数默认为所有核数. -t 数值越大,cpu使用率越低. runing.py &qu ...

  7. Cent OS 7 VNC 安装

    关闭防火墙 关闭selinux 挂载光盘到本地 #yum install tigervnc-server -y #cp /lib/systemd/system/vncserver@.service / ...

  8. [算法学习]开始leetcode之旅

    在此记录一下用javascript刷leetcode的过程,每天都要坚持! 1.Two Sum Given an array of integers, find two numbers such th ...

  9. 四、Angular新建组件和使用

    1.新建组件命令 ng component 组件路径 如果报错换成 ng generate component 组件路径 2.组件 ts 文件详解 3.组件会自动引入到app.mudule.ts里面 ...

  10. mongodb 面试题

    mongodb 面试题总结 1 nosql和关系型数据库的区别 NoSQL是非关系型数据库,NoSQL = Not Only SQL. 关系型数据库采用的结构化的数据,NoSQL采用的是键值对的方式存 ...