CSS网页制作常用标签
做了一个简单的网页,从布局到加内容,遇到了很多小问题。很多标签和属性都不会用或者忘记了。所以以此记录一下。
一、如何将边框四角变圆?(或做一个圆形)
顾名思义,如果要更改边框的角需要用到边框(border)的属性。


利用radius属性进行更改,后面的值越大,角的圆度越大。
→
画的很辛苦。点个赞吧!!
二、段落文字下划线(and整段)
1、鼠标悬浮下划线
通常我们写鼠标悬浮下划线的时候都会使用:border-bottom:1px solid black;这样的方式。但是对于一整段并分上下行的用此方法就会出现问题。
这个时候我们可以使用属性标签:text-decoration: underline;
underline:下划线
#jjj:hover{
text-decoration: underline;
}
→
2、段落永久下划线
#jjj:visited{
text-decoration: underline;
}
→
也可以使用link的方式:
#jjj:link{
text-decoration: none;
}
效果是一样的。
三、CSS延迟效果(transition)
这个效果是鼠标悬浮慢慢的或快快的变成其他效果。非常使用,也很好看。
#jjj:hover{
background-color: black;
transition: 1s;
}

四、英文字母全部大写
使用标签属性:text-transform: uppercase;


五、调整透明度
对于一些需要调整透明度的,opacity用起来还是挺方便的。
#jjj{
width: 200px;
height: 200px;
background-color: yellowgreen;
opacity: 0.6;
}


CSS网页制作常用标签的更多相关文章
- HTML|CSS之HTML常用标签
知识内容: 1.标签 2.head内标签 3.body内常用标签 注:本人使用的HTML为HTML5 一.标签 1.标签格式 标签的语法: <标签名 属性1=“属性值1” 属性2=“属性值2”… ...
- WP主题制作常用标签代码
WordPress模板结构 style.css : CSS文件index.php : 主页模板archive.php : Archive/Category模板404.php : Not Found 错 ...
- 项目实践2:项目中的CSS网页布局(常用)
好家伙, 整个网页做下来,最主要的,自然是css的网页布局(菜鸟好用啊) 我需要一个大概这样的布局: 然后上代码: <!DOCTYPE html> <html> <hea ...
- 网页制作常用的CSS知识
在制作网页中,我们会用到很多CSS的知识,在这里我简单的总结了一些. div 划分区块 ul,li 无序列表(配合划分区块) ol,li 有序列表 a 超链接标签 p 段落标签 h 标题标签 i ...
- html和css的一些常用标签使用
HTML(HyperText Mark-up Language)超文本标签语言 <!DOCTYPE html> <!--声明这是一个html文档--> <html> ...
- DIV+CSS网页布局常用的一些基础知识
CSS命名规范 一.文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二.常用类/I ...
- DIV+CSS网页布局常用的一些基础知识整理
CSS命名规范 一.文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: 二.常 ...
- 平常写css网页制作时最实用的九条CSS技巧
一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<css基本语法>. 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的 ...
- 9月5日网页基础知识 通用标签、属性(body属性、路径、格式控制) 通用标签(有序列表、无序列表、常用标签)(补)
网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...
随机推荐
- jQuery-DataTables相关的网址
DataTables 有没有觉得这张图的数据很熟悉,对,他们都是copy来的. 之前用了一个bootstrap的框架,写那个框架的老师,有点抠门,把很多js都合在了一起,不知道怎么去自定义自己的东西, ...
- Bzoj3894 文理分科
Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 667 Solved: 389 Description 文理分科是一件很纠结的事情!(虽然看到这个题 ...
- wpf 异常处理和关闭进程
using System; using System.Collections.Generic; using System.Configuration; using System.Data; using ...
- dos 批处学习笔记
dos 批处理@ 只显示命令结果echo 回显pause 暂停del 删除set 查看系统变量>nul 正确命令输入空洞2>nul 错误命令输入空洞dir 显示目录和文件&& ...
- 安装LNMP(Nginx+Mysql+PHP)
1:安装nginxyum install -y gcc pcre-devel openssl-develwget http://www.nginx.org/download/nginx-1.4.2.t ...
- 使用django开发博客过程记录4——Category分类视图
在写点击博客的所属分类,显示所有该分类的文章时真是让我想了好一会,为什么呢?因为我使用的是cbv模式开发的而不是简单的视图处理逻辑的,所以,有些操作会被包装好了,你并不知道它的细节,那么我们今天要实现 ...
- IIS同时实现网站部分使用https协议访问另一部分http访问
一:什么是https SSL(Security Socket Layer)全称是加密套接字协议层,它位于HTTP协议层和TCP协议层之间,用于建立用户与服务器之间的加密通信,确保所传递信息的安全性,同 ...
- [Unreal]学习笔记之材质说明
取消蓝图中的连接线:Alt+鼠标左键 在蓝图中,通过按住1,2,3,4加鼠标左键,可以快速生成1,2,3,4维的向量 材质和材质实例的区别:使用一个母材质,可以创建出多种场景中的材质实例:每次修改母材 ...
- 如何解决inline和linline-block在浏览器中的间距问题
写页面时,如果想要元素从左到右排列,但又不想使用浮动,那么很多人都会用到display:inline或者display:inline-block. 但是每次一用到这个两个属性,浏览器中浏览的时候就会有 ...
- yii2创建数据表
原文地址: http://blog.csdn.net/xiaoyangxiaodong/article/details/45026865