【全栈之前端练习】css小练习1

最新推荐文章于 2024-03-31 20:47:39 发布

KryHan

最新推荐文章于 2024-03-31 20:47:39 发布

阅读量175

点赞数 1

分类专栏：实训内容前后端学习文章标签： css 前端 html

本文链接：https://blog.csdn.net/qiyihan/article/details/126696258

版权

实训内容同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前后端学习

10 篇文章 0 订阅

订阅专栏

css

css的样式
首先是行内样式，之前提了一下
那么下面将的是放在title下面的style标签
那么style的标准格式为

选择器 { 声明1;
声明2;
…… }

接下来举例说明

<style>
    span{
            font-size: 15px;
            color: red;
        }
    </style>

练习

要求

做出下图：
在这里插入图片描述

思路

1.无序列表
2.行内 span标签使用
3.链接 a标签
4.图片img标签
5.行分割线

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书页面</title>
    <style type="text/css">
    .a {
        font-size: 12px;
        color: #666666;
    }
        span{
            font-size: 15px;
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="img/卖火柴的小女孩.jpg" alt="图片加载失败"height="100" width="100">
        </li>
        <li><a href="practice.html">失乐园</a> </li>
        <li class="a">现价：&yen84 <span class="sp">原价：&yen73</span></li>
    </ul><hr/>
    <ul>
        <li>
            <img src="img/卖火柴的小女孩.jpg" height="100" width="100">
        </li>
        <li><a href="practice.html" >情商是什么？</a> </li>
        <li class="a">现价：&yen84 <span class="sp">原价：&yen73</span></li>
    </ul><hr/>

</body>
</html>