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. 14、numpy——统计函数

    NumPy 统计函数 NumPy 提供了很多统计函数,用于从数组中查找最小元素,最大元素,百分位标准差和方差等. 函数说明如下:(沿哪条轴执行,就是是最后结果的形式) 1.numpy.amin() 和 ...

  2. DevExpress Winform使用单例运行程序方法和非DevExpress使用Mutex实现程序单实例运行且运行则激活窗体的方法

    原文:DevExpress Winform使用单例运行程序方法和非DevExpress使用Mutex实现程序单实例运行且运行则激活窗体的方法 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA ...

  3. JVM（5）之 GC之标记

    开发十年,就只剩下这套架构体系了! >>>     堆分为年轻代和年老代.永久代是非堆内存,它又叫做方法区(一般的说法),主要存储已被加载的类信息.常量.静态变量.而该区域在java ...

  4. k3 cloud成本调整单引入单据后，再做出库成本核算。成本调整单列表已审核的单据消失，非已审核的单据还在，这是出库成本核算设置参数的问题吗？

    存货核算时,会将“期末余额调整”类型的的调整单删除后,再重新产生:因此引入后不要再做出库核算,或者引入其它类型的单据.

  5. Linux Shell 脚本学习第一天： 使用grep 命令，lsusb, ps -ef， 实现树莓派(Debian OS)时检测到依赖的USB设备启动后，启动终端自动执行shell脚本

    1.应用背景: 无人监测的设备,常需要设置应用程序开机启动,程序启动前需要保证调用的设备先启动,运行环境先启动. 2.test.sh部分源码 #!/bin/sh #查看桌面是否启动 while tru ...

  6. vue,一路走来（15）--简单投票系统

    今天记录一下简单的投票系统,主要实现选中至少五张作品,并提交投票. 思路:选中作品,将作品id存入到数组里. 取消投票,则从数组中移除该作品id. 如图效果: <li v-for="( ...

  7. （ACM模板）集合set

    #include<iostream> #include<cstdio> #include<set> using namespace std; int main() ...

  8. Ehcahe独立使用

    <?xml version="1.0" encoding="utf-8"?><ehcache xmlns:xsi="http://w ...

  9. 前端每日实战：66# 视频演示如何用纯 CSS 创作一台咖啡机

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/rKPLMW 可交互视频 此视频是可 ...

  10. 8.xpath(dom4j支持的jar)

    1.使用dom4j支持xpath的操作(xpath可以直接获取到某个元素) (1)第一种形式 /AAA/DDD/BBB:表示一层一层的,AAA下面DDD下面的BBB元素 (2)第二种形式 //BBB: ...