Question

以下是HTML代码：

<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>

如何在不改变HTML的情况下仅使用CSS在下图中创建布局？（字体和颜色不重要。）

Answer 1

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>

Answer 2

＆＃13;

* {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;
}

＆＃13;

<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>

＆＃13;

Answer 3

我希望你能从这个例子中学习

<!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>

css任务 - 如何在不更改html代码的情况下进行格式化

3 个答案: