CSS 3之美化菜单

美化菜单

  • 1. 无序列表
  • 2. 有序列表

1. 无序列表

    无序列表是网页中常见的元素之一,会用
  • 标记罗列哥哥项目,且每个项目前都带有特殊符号;
    使用 list-style 属性来定义无序列表的项目符号;
    无序列表的list-style 语法格式如下所示:

    list-style-type:disc | circle | square | none
    

    CSS 3之美化菜单_第1张图片例子 1:

    DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>美化无序列表title>
    		<style type="text/css">
    			*{
    				margin: 0px;
    				padding: 0px;
    				font-size: 15px;
    			}
    			p{
    				margin: 6px 0 0 6px;
    				color: #00B7EE;
    				font-size: 16PX;
    				font-family: 宋体;
    			}
    			div{
    				width: 340px;
    				margin: 10px 0 0 10px;
    				border: 1px #CCCC77 dashed;
    			}
    			div ul{
    				margin-left: 45px;
    				list-style-type: square;
    			}
    			div li{
    				margin: 6px 0 6px;
    				color: blue;
    				text-decoration: underline;
    			}
    		style>
    	head>
    	<body>
    		<div class="b">
    			<p>团购p>
    			<ul>
    				<li>文影城:单人影票li>
    				<li>游乐场:现金抵用一次,节假日通用li>
    				<li>烤吧:烤肉双人自助午餐,不限量,全天候li>
    				<li>渔港:6-8人餐,餐具免费li>
    			ul>
    		div>
    	body>
    html>
    
    

    CSS 3之美化菜单_第2张图片

    2. 有序列表

      有序类别标记能创建具有顺序的列表;
      使用 list-style 属性,能改变有序列表前面的符号;
      有序列表的list-style 语法格式如下所示:

      list-style-type:decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
      

      CSS 3之美化菜单_第3张图片
      例子 2:

      DOCTYPE html>
      <html>
      	<head>
      		<meta charset="utf-8">
      		<title>有序列表title>
      		<style type="text/css">
      			*{
      				margin: 0px;
      				padding: 0px;
      				font-size: 14px;
      			}
      			p{
      				margin: 5px 0 0 5px;
      				color: green;
      				font-size: 16px;
      				font-family: 宋体;
      				border-bottom-width: 2px;
      				border-bottom-style: solid;
      			}
      			div{
      				width: 300px;
      				margin: 10px 0 0 10px;
      				border: 1px #B94A48 solid;
      			}
      			div ol{
      				margin-left: 45px;
      				list-style-type: upper-alpha;
      			}
      			div li{
      				margin: 6px 0 6px 0;
      				color: blue;
      			}
      		style>
      	head>
      	<body>
      		<div class="g">
      			<p>图书类型p>
      			<ol>
      				<li>人文类li>
      				<li>艺术类li>
      				<li>工程类li>
      				<li>化学类li>
      			ol>
      		div>
      	body>
      html>
      
      

      CSS 3之美化菜单_第4张图片

你可能感兴趣的:(web,前端学习,#,CSS,css,前端,html)