11种常用css样式之鼠标、列表和尺寸样式学习
鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/cursor:default;/*箭头指示形状*/cursor:help;/*帮助形状*/
列表(list-style-type):none/*把列表前面的选项去除*/disc/*实心*/circle/*空心*/square/*方块*/decimal/*序列*/lower-roman/*小写罗马*/upper-roman/*大写罗马*/lower-alpha/*小写字母*/upper-alpha/*大写字母*/
尺寸:height;max-height;min-height;width;max-width;min-width/*屏幕自适应宽度,100%*/textarea文本框:resize:none/*文本框不能拖动*/width:500px;height:300px;样式继承:文字有关的样式会继承下来(阅读css常用样式font控制字体的多种变换)文本框resize:none文本框不能拖动)样式继承/*文字有关的样式会继承下来*/阅读"css常用样式font控制字体的多种变换"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>11种常用css样式之鼠标、列表和尺寸样式学习</title>
<style type="text/css">
/*常见鼠标样式*/
#ceshi{
/* width: 120px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 5px;
color: #fff;
border: 1px inset red;
background-color: green; */
cursor: crosshair;/*十字架*/
cursor: text;/*默认 文本*/
cursor: wait;/*等待加载*/
cursor: help;/*请求帮助*/
cursor:default;/*箭头指示*/
cursor: pointer;/*小手*/
}
/*常见列表样式*/
.box>ul li{
list-style: none;/*把列表前面的选项去除*/
list-style-type: disc;/*实心圆点*/
list-style-type: circle;/*空心圆点*/
list-style-type: square;/*方块*/
list-style-type: decimal;/*序列123..*/
list-style-type: lower-alpha;/*小写字母*/
list-style-type: upper-alpha;/*大写字母*/
list-style-type: lower-latin;/*小写字母*/
list-style-type: lower-roman;/*小写罗马*/
list-style-type: upper-roman;/*大写罗马*/
}
.box>ul li>a{
text-decoration: none;
}
/*拓展，字母大小写、文本默认方向;建议阅读“css常用样式对文本的处理演练”*/
p{
direction: ltr;
text-transform: uppercase; /*全部大写*/
text-transform: lowercase;
text-transform: capitalize;
}
/* 尺寸 如何清理浮动阅读https://www.cnblogs.com/dhnblog/p/12313037.html*/
.size{
background-color: #000;
}
.size>ul{
width: 1920px;
min-width: 1300px;/*屏幕自适应宽度100%*/
padding-left: 0;
padding-right: 40px;
line-height: 40px;
}
.size>ul>li{
list-style-type: none;
float: left;
margin-left: 15px;
}
.size>ul>li>a{
text-decoration: none;
color: #fff;
}
.size::after{
content: '';
clear: both;
display: block;
}/*清浮动*/
#ueser{
width: 100px;
height: 100px;
resize: none;/*不能拖动*/
}
</style>
<script>
window.onload=function(){
var obj=document.getElementById('ceshi')
obj.onclick=function(){
console.log('123');
alert('f12打开控制台');
document.body.style.background='#f90'
}
}
</script>
</head>
<body>
<div id="ceshi">
点我有惊喜
</div>
<div class="box">
<ul>
<li><a href="#">列表abc1</a></li>
<li>列表abc2</li>
<li>列表abc3</li>
<li>列表abc4</li>
<li>列表abc5</li>
</ul>
</div>
<p>asAAAAdbc</p>
<!-- 尺寸 使用ul制作一个导航菜单-->
<div class="size">
<ul>
<li><a href="#">百度</a></li>
<li><a href="#">新浪</a></li>
<li><a href="#">搜狐</a></li>
<li><a href="#">网易</a></li>
<li><a href="#">考拉</a></li>
</ul>
</div>
<!-- textarea文本框 -->
<form action="">
<p>用户名：</p><input type="text" name="">
<p>留言信息：</p>
<textarea name="" id="ueser" cols="30" rows="10" ></textarea>
</form>
<!-- 样式继承 文字有关的样式会继承下来 -->
</body>
</html>
11种常用css样式之鼠标、列表和尺寸样式学习的更多相关文章
- 11种常用css样式之开篇文本字体学习
常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏 文本:1.letter-spaci ...
- 11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...
- 11种常用css样式之表格和定位样式学习
table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...
- 11种常用css样式之border学习
边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-st ...
- 11种常用css样式之background学习
background如何简写?如何在背景图像不变的情况下,依旧实现页面文字滚动,为之奈何?别担心,快用background-attachment: fixed;/*固定定位*/常用的backgroun ...
- css3-5 css3鼠标、列表和尺寸样式怎么用（文字有关的样式会被继承）
css3-5 css3鼠标.列表和尺寸样式怎么用(文字有关的样式会被继承) 一.总结 一句话总结:css标签中文字有关的样式会被继承.由常用样式记起. 1.鼠标常用样式有哪些? cursor:poi ...
- css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁
css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...
- 常用 css html 样式
CSS基础必学列表 CSS width宽度 CSS height高度 CSS border边框 CSS background背景 CSS sprites背景拼合 CSS float浮动 CSS mar ...
- html、css实现导航栏5种常用下拉效果
实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...
随机推荐
- squeeze(s1,s2),将字符串s1中任何与字符串s2中匹配的字符都删除
void squeeze(char a[],char b[]) { //要实现把s2的任意字符如果出现的话就在s1中删除 //1.首先判断s1[j]==s2[i]&&s1[j]=='\ ...
- Mabitis
Mybatis 一.框架概念: Java框架,一个软件半成品,简单来说就是一个别人搭好的舞台,你来做表演,说白了Java框架就是封装好方便程序员操作的类,使项目的开发更简单,维护起来也更容易. 而My ...
- 简单看看LockSupport和AQS
这次我们可以看看并发中锁的原理,大概会说到AQS,ReentrantLock,ReentrantReadWriteLock以及JDK8中新增的StampedLock,这些都是在java并发中很重要的东 ...
- Java 8 Stream流编程学习
本文是自己学习菜鸟教程中总结的笔记,用于快速找代码,完整的文档见菜鸟教程:Java 8 Stream Stream 使用一种类似用SQL语句从数据库查询数据的直观方式来提供一种对Java集合运算和表达 ...
- requests快速构造请求头的方法
上图请求头内容,内容多不说,也不确认哪些数据是必须的,网上找到一个懒办法 快速一键生成 Python 爬虫请求头 实战演练 抓取网站:https://developer.mozilla.org... ...
- PYTHON经典算法-二叉树的后序遍历
二叉树的后序遍历 问题描述 给出一个二叉树,返回其节点值的后序遍历 问题示例 给出一个二叉树{1,x,2,3}其中x表示空.后序遍历为[3,2,1] 这个图怎么画的呢?答案 需要注意的地方是:bina ...
- Git详解之基础使用
前言 读完本章你就能上手使用 Git 了.本章将介绍几个最基本的,也是最常用的 Git 命令,以后绝大多数时间里用到的也就是这几个命令.读完本章,你就能初始化一个新的代码仓库,做一些适当配置:开始或停 ...
- 看片微信号＋薇myy9199买片微信号＋myy9199绝对靠谱号
最新看片卖片微信号+myy9199,2020最新有效靠谱号,诚信有效,死链包换,2019年11月,我决定学习计算机编程,以java语言为主.我就读于传统工科专业,没怎么接触过计算机相关概念与课程,我知 ...
- python学习Day03
[主要内容] 1. 编码 1. 最早的计算机编码是ASCII. 美国人创建的. 包含了英文字母(大写字母, 小写字母). 数字, 标点等特殊字符!@#$% 128个码位 2**7 在此基础上加了一位 ...
- demon病毒样本分析
1. 简介 该样本是前几周爆发的THINKPHP漏洞中,被批量上传的一个病毒样本.如图所示. 2. 分析 该样本未经混淆,加壳,所以直接拖到IDA中即可分析. 首先从main函数开始.做一些初始化的函 ...