一看就会的CSS讲解(八)CSS篇完结

  • 时间:2018-12-21 23:07 作者:一只快乐的小码农 来源:一只快乐的小码农 阅读:192
  • 扫一扫,手机访问
摘要:1:CSS设置列表样式1-1:设置列表的符号代码举例:ul,ol{list-style-type: square;//把有序和无序属性前面统一设置成方块样式,个别调整直接在里 面加}//无序排列你好头条号//有序排列主页一只快乐的小码农图文主页发表文章悟空问答代码效果图:1-2:设置列表图片符号ul
  • 1:CSS设置列表样式
  • 1-1:设置列表的符号
  • 代码举例:
  • }
    • //无序排列
    1. //有序排列
    2. 主页
    3. 一只快乐的小码农
    4. 图文主页
    5. 发表文章
    6. 悟空问答
  • 代码效果图:
一看就会的CSS讲解(八)CSS篇完结


  • 1-2:设置列表图片符号
    1. //有序排列
    2. 主页
    3. 一只快乐的小码农
    4. 图文主页
    5. 发表文章
    6. 悟空问答
  • 代码效果图:
  • 一看就会的CSS讲解(八)CSS篇完结


    • 1-3:创立简单导航菜单
    • #navigation {
    • width:120px;//导航栏整体的宽度
    • font-family:Arial;//字体
    • font-size:14px;//大小
    • text-align:right//文字居右
    • }//逐层递进的去设置
    • #navigation ul {
    • list-style-type:none;/* 不显示项目符号 */
    • margin:0px;
    • padding:0px;
    • }
    • #navigation li {
    • border-bottom:1px solid #9F9FED;/* 增加下划线 */
    • }
    • #navigation li a{
    • display:block;
    • height:1em;
    • padding:5px 5px 5px 0.5em;
    • text-decoration:none;
    • float:left//横向
    • }
    • #navigation li a:link, #navigation li a:visited{
    • background-color:#1136c1;
    • color:#FFFFFF;
    • }
    • #navigation li a:hover{/* 鼠标经过时 */
    • background-color:#002099;/* 改变背景色 */
    • color:#ffff00;/* 改变文字颜色 */
    • }
    • 代码效果图1:
    一看就会的CSS讲解(八)CSS篇完结

    • 代码效果图2:
    一看就会的CSS讲解(八)CSS篇完结

    • 好了,至此,CSS开发中经常用到的属性和样式就一律完结了,需要你不断练习和丰富效果,我给你间的都是简单粗暴让你一下子了解这个是如何实现的,前台效果炫酷的太多了,需要你去摸索。我们下一步考虑讲一下js。敬请期待
    一看就会的CSS讲解(八)CSS篇完结

    • 全部评论(0)
    最新发布的资讯信息
    【系统环境|】阿里云服务器Centos7搭建pptp VPN 一键安装脚本 亲测好用(2020-03-18 02:39)
    【系统环境|服务器应用】在CentOS 7上如何安装Gogs 0.11.53(2020-02-10 10:14)
    【系统环境|】淘码库,据消息称已被调查。淘码库源码网,已经无法访问!(2020-01-14 04:13)
    【系统环境|服务器应用】Discuz隐藏后台admin.php网址修改路径(2019-12-16 16:48)
    【系统环境|服务器应用】2020新网站如何让百度快速收录网站首页最新方法,亲测有用!免费(2019-12-16 16:46)
    【系统环境|服务器应用】Discuz发布帖子时默认显示第一个主题分类的修改方法(2019-12-09 00:13)
    【系统环境|软件环境】Android | App内存优化 之 内存泄漏 要点概述 以及 处理实战(2019-12-04 14:27)
    【系统环境|软件环境】MySQL InnoDB 事务(2019-12-04 14:26)
    【系统环境|软件环境】vue-router(单页面应用控制中心)常见用法(2019-12-04 14:26)
    【系统环境|软件环境】Linux中的Kill命令(2019-12-04 14:26)
    手机二维码手机访问领取大礼包
    返回顶部