CSS的任務 - 如何在不更改HTML代碼

-2

<head> 
    <meta charset="UTF-8"> 
    <title>Visszaszámlálás</title> 
    <style> 
     /* CSS helye */ 
    </style> 
</head> 
<body> 
    <ul> 
     <li>one</li> 
     <li>two</li> 
     <li>three</li> 
     <li>four</li> 
     <li>five</li> 
     <li>six</li> 
     <li>seven</li> 
     <li>eight</li> 
     <li>nine</li> 
     <li>ten</li> 
    </ul> 
</body>

如何我可以創建圖像中的佈局下面只使用CSS，而不改變HTML？（字體和顏色並不重要。）

來源

2017-01-29 easymaaan

body { 
 
    background-color: #222; 
 
} 
 
li { 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 30px; 
 
    width: 100px; 
 
    text-decoration: none; 
 
    margin: 0 auto; 
 
    list-style: none; 
 
    text-align: center; 
 
    border-bottom: 9px solid teal; 
 
}

<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Visszaszámlálás</title> 
 
    <style> 
 
     /* CSS helye */ 
 
    </style> 
 
</head> 
 
<body> 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
     <li>four</li> 
 
     <li>five</li> 
 
     <li>six</li> 
 
     <li>seven</li> 
 
     <li>eight</li> 
 
     <li>nine</li> 
 
     <li>ten</li> 
 
    </ul> 
 
</body>

來源

2017-01-29 16:49:25 Omnitored

* {margin:0;padding:0;box-sizing:border-box;} 
 
body { 
 
    background: #222; 
 
    text-align: center; 
 
    color: #fff; 
 
    font-weight: bold; 
 
    font-family: sans-serif; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1em; 
 
    font-size: 2em; 
 
    padding: .5em 0; 
 
} 
 

 
ul { 
 
    display: inline-block; 
 
} 
 

 
li { 
 
    list-style: none; 
 
    border-bottom: .5em solid turquoise; 
 
    padding: 0 0 .25em 1em; 
 
    margin: 0 0 .25em; 
 
}

<ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>three</li> 
 
    <li>four</li> 
 
    <li>five</li> 
 
    <li>six</li> 
 
    <li>seven</li> 
 
    <li>eight</li> 
 
    <li>nine</li> 
 
    <li>ten</li> 
 
</ul>

來源

2017-01-29 16:52:44

我希望你會從這個例子學到

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
    body, html { 
     width: 100%; 
     height: 100%; 
     background: black; 
    } 
    ul :last-child{ 
     border-bottom:none; 
    } 
    li{ 
     color: white; 
     list-style: none; 
     width: 200px; 
     text-align: center; 
     font-size:40px; 
     border-bottom: solid 10px turquoise; 
    } 

</style> 
</head> 
<body> 
    <ul> 
     <li>one</li> 
     <li>two</li> 
     <li>three</li> 
     <li>four</li> 
     <li>five</li> 
     <li>six</li> 
     <li>seven</li> 
     <li>eight</li> 
     <li>nine</li> 
     <li>ten</li> 
    </ul> 
</body> 
</html>

來源

2017-01-29 16:58:40 Will

CSS的任務 - 如何在不更改HTML代碼

回答

相關問題