美化导航html,HTML-美化
1、美化文本
1.1第一部分
font-size:字体大小,常用em、px、%、rem作单位,预设值small、large、medium,可继承,
font-weight:加粗字体,属性为bold,加粗字体,(100-900之间的数值也可以)或者设置700(与bold效果相同),400是正常情况,100-900之间取整,可继承;
font-style:italic 倾斜字体,可继承;
letter-spacing调整字间距,单位px或者em都可以,可继承;
text-indent首行缩进,一般是在p标签上面使用,span标签使用margin-left:2em可实现效果;
text-decoration,给文字设置下划线,默认是没有线条,overline(文字顶部),underline(文字底部),line-through(文字中部,效果和del元素一样),只有先设置了下划线位置之后,才能设置下划线的颜色,样式等等。
1.2第二部分
(1) 修饰首字母:伪元素选择器,【::first-letter】,可以选择元素中的第一个文字;
可以运用的属性:font 属性color 属性、background 属性、margin 属性、padding 属性、border 属性、text-decoration、vertical-align (仅当 'float' 为 'none' 时)、text-transform、line-height、float、clear
(2) 修饰首行:伪元素选择器,【::first-line】,可以选中元素中的第一行文字;
(3) 修饰选中文字:伪元素选择器,【::select】可选中被用户框选的文字;
(4) 字体类型:分为衬线字体和非衬线字体
font-family,设置字体类型,为了避免全部都失效的情况,通常将最后一个值设置为"sans-serif"或"serif"。
向浏览器引入字体:@font-face{font-family:“名字”};src:url(字体地址)。
2、美化边框
(1) 圆角边框:【border-radius】设一个值是正圆,两个值是椭圆。
3、美化背景
(1)【background-image】设置背景图片;
(2)【background-repeat】设置图片重复方式;
【repeat】默认值,从左到右从上到下重复;
【no-repeat】不重复;
【repeat-x】仅在x轴方向上重复;
【repeat-y】仅在y轴方向上重复。
(3)【background-position】设置图片在边框盒中的具体位置。
预设值left、right、top、bottom、center
比如:background-position:center(水平垂直居中);center top(水平居中);left bottom(左边下边);50px 100px(图片距离左边50,上边100)
雪碧图那个是指一个大的背景里面只需要小部分背景,其他的不要,通过设置盒子的大小和移动背景图的位置来保留想要的区域。
(4)【background-size】设置背景图尺寸;
Background-size:contain;等比例缩放图片,不管盒子,可以不覆盖盒子;
Background-size:cover;图片大小等比例缩放,但是必须覆盖整个盒子。
(5)【background-attachment】固定背景图
Scroll:默认值,背景图跟随元素移动;
Fixed:背景图固定。
(6)速写【background】统一设置
Background:背景图 位置/尺寸 重复方式 固定方式 背景颜色;
4、背景渐变
(1) 线性渐变【background-image:linear-gradient()】
(2) 径向渐变【background-image:radial-gradient()】
5、透明度
(1) 使用【opacity】属性,可调整整个盒子的透明度该属性的取值范围是0~1 ,其中,0表示全透明,1表示完全不透明;
(2) 使用rgba颜色,可调整某个颜色的透明度,
rgba分别表示: r:red,g:green,b:blue,a:alpha
书写格式为:rgba(red, green, blue, alpha);
其中,alpha表示透明通道,取值是0~1之间;
0表示全透明,1表示完全不透明;
也可以用十六进制表示,例如rgba(0,0,0,0.5)可以写成#00000080。
(3) 调整鼠标样式
使用cursor属性
6、阴影
(1)【text-shadow】设置文本的阴影;
h-shadow 必需,水平阴影的位置。允许负值;
v-shadow 必需,垂直阴影的位置。允许负值;
blur 可选,模糊的距离;
color 可选,阴影的颜色。
(2)【box-shadow】设置文本框的阴影;
h-shadow 必需,水平阴影的位置,允许负值;
v-shadow 必需,垂直阴影的位置,允许负值;
blur可选,模糊距离;
spread可选,阴影的尺寸;
color 可选,阴影的颜色;
inset 可选,将外部阴影 (outset) 改为内部阴影。
美化导航html,HTML-美化相关推荐
- 站长技术导航二开美化网站源码 网站提交自动秒收录
今天发现一款还挺不错的导航网源码,分享给大家,源码无BUG,无任何后门,导入数据库,然后修改为自己的信息就可以了,数据库里面也有收录接近一百个网站了. 安装教程: PHP版本需要选择5.6才能运行程序 ...
- HTML+CSS 主页面美化的详细过程及全部代码(美化导航栏+文本框+按钮)
文章目录 效果图展示 前言 步骤 0.创建css文件 1.美化中间板块 1.1 html改变 1.2. css部分 1.3. placeholder美化 2.增加导航栏 2.1 html文件增加代码 ...
- 仿凡科网站右侧悬浮窗 在线客服简约图标大全快捷导航钻芒美化版
之前有发个一个凡科的右侧悬浮窗,今天给加了一些图标样式,新增css判断窗口大小自动隐藏(手机端不会显示),这下比较齐全了. 可以自己自定义图标,在css更改图片链接即可(背景图标和鼠标hover浮动图 ...
- html注册页面美化,css登录界面美化
本篇文章主要介绍如何用css美化网站登录界面,需要的小伙伴参考下. 代码如下: 美化登录 *{margin:0;padding:0;}/*去掉页面样式*/ body{color:white;} .co ...
- ubuntuv20启动界面美化_手机图标美化amp;通知小红点美化
哈喽,我是XX酱,好久没分享安卓手机美化教程了,所以本期就来一发吧. 本期美化重点 桌面图标美化 + 图标通知小红点美化 美化效果体验 先来一张美化后的界面整体效果,简约,个性,活力! 有木有发现不一 ...
- Android 4.4之后状态栏和导航栏细节美化(沉浸式状态栏)
转载请注明出处:http://blog.csdn.net/demokui/article/details/54603284 本篇文章出自:[姜奎的博客] 1. 简介 其实标题我是打算叫"抢眼 ...
- html 下拉列表美化,JS+CSS实现美化的下拉列表框效果
本文实例讲述了JS+CSS实现美化的下拉列表框效果.分享给大家供大家参考.具体如下: 一款经过JS+CSS美化的下拉列表,效果很不错,但代码有点偏多,学习CSS的朋友可以学习一下方法,然后自己变通一下 ...
- linux光标美化包,使用 [ powerlevel10k ] 美化你的WSL (Linux)
使用 [ powerlevel10k ] 美化你的WSL (Linux) 使用 [ powerlevel10k ] 美化你的WSL (Linux) 前言 关于linux终端的美化,网上的教程有很多,但 ...
- ubuntu桌面美化mac_Ubuntu16.04 主题美化
原桌面 flatabulous主题桌面 1.更新 sudo apt-get update sudo apt-get upgrade 2.安装unity-tweak-tool sudo apt-get ...
- win7美化_Windows桌面管理美化,让桌面更加方便、高效
当今社会,无论是工作还是生活中,电脑已经成为我们必不可少的电子设备.电脑桌面是我们开启电脑后第一眼到的画面,桌面的整洁与否,某种程度上也会影响到工作的情绪以及进入工作状态的速度.一个干净整洁的桌面能让 ...
最新文章
- 用泰勒级数来估计函数的近似值
- sudo规则支持正则
- java paintComponent的一些解读
- C. Kefa and Park【树的遍历】
- xavier初始化_深入解读xavier初始化(附源码)
- NPM Unexpected end of JSON input while parsing near
- 如何提高VS2010的性能,VS2010不再…
- k8s部署nacos
- 真彩色、假彩色和伪彩色的区别
- 药店管理系统|数据库设计
- 一些常用的英文写作网站
- CodeForces 1K-1400R-1324D
- python实现线性回归之梯度下降法,梯度下降详解
- jsnes-FC模拟器-在线玩fc游戏
- CVE-2016-2183 解决方法
- python出错文件_python保存文件出错怎么解决?
- x264参数中文详解
- 1024程序员节,给猿媛们的超值当当网购书薅羊毛
- 在软件测试中如何搭建测试环境?
- 重庆海天软件工程学院的WINFORM实训项目-抽奖系统
热门文章
- java poi 创建ppt图表,柱状图
- python名片系统_初识python-名片管理系统v1.0
- html form回调函数,js 中的submit 回调函数
- 利用EXCEL进行数据爬虫
- app消息推送的详细实现教程
- html5 m3u8 直播,html5 让video支持m3u8播放
- 微型计算机偏移地址,请高手讲解一下在微机原理里面,偏移地址,段地址,实体地址之间的关系!配合图解更好,谢谢!...
- Vue组件间通信:父传子(props),子传父($emit)
- 定义结构体变量的三种方法
- if的用法及常见问题