很容易理解的前端基礎(chǔ)CSS-如何美化你的網(wǎng)站【零基礎(chǔ)向】
<style>
? ? img{
? ? ? ? display: block; ?/*顯示為塊*/
? ? ? ? border-radius: 20px; ? /*圓角 20px*/
? ? ? ? margin: auto;
? ? ? ? padding: 10px;
? ? }
? ? .flex{
? ? ? ? display: flex; ?/*顯示為flex盒 */
? ? ? ? justify-content:space-around; /*每個項目間隔相等排列*/
? ? ? ? list-style-type: none; /*列表項標(biāo)記的類型為無*/
? ? ? ? margin: auto;
? ? ? ? padding: 0;
? ? ? ? width: 600px;
? ? ? ? background-color: white;
? ? ? ?
? ? }
? ? .button { /*按鈕組樣式*/
? ? ? ? background-color: #4CAF50;
? ? ? ? border: none;
? ? ? ? color: white;
? ? ? ? padding: 5px 5px;
? ? ? ? text-align: center;
? ? ? ? text-decoration: none;
? ? ? ? display: inline-block;
? ? ? ? font-size: 16px;
? ? ? ? cursor: pointer;
? ? ? ? float: left;
? ? ? ? margin: 10px;
? ? ? ? border-radius: 5px;
? ? }
? ? .button:hover {
? ? ? ? background-color: #3e8e41;
? ? }
</style>
<body>
? ? <img src="../R-C.jpg" alt="風(fēng)景圖" width="640" height="400">
? ? <ul class="flex">
? ? ? ? <li><a class="button" href="./CSS.html">原圖</a></li>
? ? ? ? <li><a class="button" href="./Style0.html">樣式1</a></li>
? ? ? ? <li><a class="button" href="./Style1.html">樣式2</a></li>
? ? ? ? <li><a class="button" href="./Style2.html">樣式3</a></li>
? ? ? ?
? ? </ul>
</body>
