【代碼筆記】Web-CSS-CSS樣式列表(url)

Jiavan 發布于2019-04-23 11:52 / 3178人閱讀

一，效果圖。

二，代碼。

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS 樣式列表(url)title>
    <style>
    ul.a {
        list-style: circle;
    }
    
    ul.b {
        list-style: square;
    }
    
    ol.c {
        list-style: upper-roman;
    }
    
    ol.d {
        list-style: lower-alpha;
    }
    
    ul {
        list-style: none;
        padding: 0px;
        margin: 0px;
    }
    
    ul li {
        background-image: url(sqpurple.gif);
        background-repeat: no-repeat;
        background-position: 0px 5px;
        padding-left: 14px;
    }
    style>
head>

<body>
    <p>example of unorderedp>
    <ul class="a">
        <li>coffeeli>
        <li>teali>
        <li>coca cocali>
    ul>
    <ul class="b">
        <li>coffeeli>
        <li>teali>
        <li>coca cocali>
    ul>
    <p>example of ordered lists:p>
    <ol class="c">
        <li>coffeeli>
        <li>teali>
        <li>coco cocoli>
    ol>
    <ol class="d">
        <li>coffeeli>
        tea
        cocoa cocoa

參考資料:《菜鳥教程》

云服務器 GPU云服務器 html列表樣式圖片 js中下拉列表的樣式 php 代碼審計筆記 css樣式代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1285.html

【代碼筆記】Web-CSS-CSS background背景

摘要：實例改文本插入在元素中該段落有自己的背景顏色背景圖片不重復，設置實例背景圖片只顯示一次，并與文本分開實例中還添加了屬性用于讓圖片與文本間隔開參考資料菜鳥教程一，效果圖。二，代碼。 DOCTYPE html> CSS backgrounds h1 { background-color: #6495ed; } ...

番茄西紅柿 2019-04-23 11:54 評論0 收藏0
【代碼筆記】Web-CSS-CSS 教程

一，效果圖。二，代碼。 DOCTYPE html> CSS 教程 body { background-color: #d0e4fe; } h1 { color: range; text-align: center; } p { fon...

endless_road 2019-04-23 11:55 評論0 收藏0
【代碼筆記】Web-CSS-CSS 語法

一，效果圖。二，代碼。 DOCTYPE html> CSS 語法 p { color: red; text-align: center; } Hello world! this paragraph is styled with css ? 參考資料：《菜鳥教程》

zhangwang 2019-04-23 11:55 評論0 收藏0
【代碼筆記】Web-CSS-CSS id和Class選擇器

一，效果圖。二，代碼。 DOCTYPE html> CSS id和class選擇器 #para1 { text-align: center; color: red; } .center { text-align: center; } p.center...

Pluser 2019-04-23 11:54 評論0 收藏0
【代碼筆記】Web-CSS-CSS Text（文本）

摘要：文本加上上劃線全變成大寫文本的第一行縮進加上下劃線全變成小寫加上下劃線首字母大寫去掉鏈接的下劃線參考資料菜鳥教程一，效果圖。 ? 二，代碼。 ? ? DOCTYPE html> CSS Test(文本) body { color: red } h1 { color: #00ff00; ...

tain335 2019-04-23 11:53 評論0 收藏0