CSS练习

已于 2024-04-10 08:48:42 修改
阅读量178 收藏
点赞数 2
文章标签： css 前端
于 2024-04-06 20:50:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76207585/article/details/137429514
版权

1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_1</title>
    <style>
        .contain {
            display: flex;
            border: 1px solid blue;
            border-radius: 5px;
            width: 800px;
        }

        .input {
            width: 630px;
            border: none;
            padding: 10px;
            font-size: 16px;
        }

        .btn {
            background-color: blue;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }

        .input:focus {
            outline: none;
        }

        .btn:hover {
            background-color: darkblue;
        }

        .img:hover {
            opacity: 0.5;
        }

    </style>
</head>
<body>

<div class="contain">
    <input type="text" class="input">
    <img src="img/6.jpg" class="img" style="height: 40px; cursor: pointer">
    <button class="btn">百度一下</button>
</div>

</body>
</html>

效果：

2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_2</title>
    <style>
        .main {
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 2px dashed #bdbdbd;
            border-radius: 8px;
            width: 1000px;
        }

        .span {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
            cursor: pointer;
            position: relative;
        }

        .cross {
            position: relative;
            width: 150px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .cross:before {
            content: '';
            position: absolute;
            background-color: #ccc;
            top: 50%;
            left: 0;
            width: 100%;
            height: 1px;
        }

        .cross:after {
            content: '';
            position: absolute;
            background-color: #ccc;
            top: 0;
            left: 50%;
            width: 1px;
            height: 100%;
        }

        .btn {
            background-color: blue;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
            position: relative;
            top: 70px;
        }

        .btn:hover {
            background-color: #0000bb;
        }
    </style>
</head>

<body>
<div class="main">
    <input type="file" id="file-upload" class="input" hidden>
    <span for="file-upload" class="span">
        <div class="cross"></div>
    </span>
    <button class="btn">选择文件</button>
</div>
</body>
</html>

 效果：

3.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_3</title>
    <style>
        .search {
            width: 800px;
            display: flex;
            align-items: center;
            border: 2px solid orange;
            border-radius: 4px;
            background-color: #fff;
        }

        .drop-btn {
            background-color: #ffffff;
            color: #919191;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
        }

        .content a {
            color: #7c7c7c;
            padding: 12px 16px;
            display: block;
        }

        .dropdown:hover .content {
            display: block;
        }

        .input {
            flex-grow: 1;
            border: none;
            padding: 10px;
        }

        .btn {
            background-color: orange;
            color: #fff;
            border: none;
            border-radius: 0 4px 4px 0;
            padding: 10px 20px;
            cursor: pointer;
        }

        .input:focus {
            outline: none;
        }

        .btn:hover {
            background-color: darkorange;
        }

    </style>
</head>
<body>

<div class="search">
    <div class="dropdown">
        <button class="drop-btn">宝贝</button>
        <div class="content">
            <a href="#" style="text-decoration:none">图片</a>
            <a href="#" style="text-decoration:none">视频</a>
        </div>
    </div>
    <input type="text" class="input" placeholder="手机壳">
    <button class="btn">搜索</button>
</div>

</body>
</html>

 效果：

4. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_4</title>
    <style>
        .fixed {
            position: fixed;
            top: 0;
            left: 0;
            width: 85px;
            background-color: #f6f8f9;
            color: black;
            border-right: 2px solid gray;
            border-radius: 10px;
            text-align: center;
        }

        .menu {
            padding: 10px;
            display: block;
        }

        .icon {
            width: 40px;
            display: flex;
            position: relative;
            left: 10px;
        }
    </style>
</head>

<body>
<div class="fixed">
    <div class="menu"><img src="img/5.jpg" class="icon">联系客服</div>
    <div class="menu"><img src="img/5.jpg" class="icon">购物车</div>
    <div class="menu"><img src="img/5.jpg" class="icon">官方客服</div>
    <div class="menu"><img src="img/5.jpg" class="icon">反馈</div>
    <div class="menu"><img src="img/5.jpg" class="icon">举报</div>
    <div class="menu"><img src="img/5.jpg" class="icon">回顶部</div>
</div>
</body>
</html>

 效果：

5.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_5</title>
    <style>
        .image-slider {
            position: relative;
            width: 300px;
            height: 500px;
            margin: 50px auto;
            border-radius: 10px;
            overflow: hidden;
        }

        .image-container img {
            width: 300px;
            height: 500px;
            display: block;
        }

        .indicators {
            position: absolute;
            bottom: 15px;
            left: 40%;
            display: flex;
        }

        .indicator {
            height: 10px;
            width: 10px;
            background: #ddd;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }

        .indicator.active {
            background: orange;
        }

    </style>
</head>
<body>
<div class="image-slider">
    <div class="image-container">
        <img src="./img/7.jpg" alt="image"/>
    </div>
    <div class="indicators">
        <span class="indicator active"></span>
        <span class="indicator"></span>
        <span class="indicator"></span>
    </div>
</div>
</body>
</html>

效果;

6.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_6</title>
    <style>
        .element {
            border-radius: 10px;
            padding: 20px;
        }

        .product-list {
            padding: 0;
            margin: 0;
            display: flex;
            gap: 100px;
        }

        .product {
            display: flex;
            width: 300px;
        }

        .image {
            width: 120px;
            height: 120px;
            margin-bottom: 8px;
            background: url("./img/4.jpg");
        }

        .name {
            display: flex;
            position: relative;
            left: 30px;
            top: 15px;
            font-size: 20px;
        }

        .price {
            display: flex;
            position: relative;
            left: -60px;
            top: 80px;
            font-size: 20px;
            position: relative;
            color: #FF6200;
            font-size: 25px;
        }

        h3 {
            padding: 0;
            margin: 0;
        }

    </style>
</head>
<body>

<div style="display: flex">
    <div class="element" style="background-color: #FDEEE9;">
        <h3>淘工厂 · 良心工厂货</h3>
        <ul class="product-list">
            <li class="product">
                <div class="image"></div>
                <div class="name">商品名称1</div>
                <div class="price"><b>¥ 6.05</b></div>
            </li>
            <li class="product">
                <div class="image"></div>
                <div class="name">商品名称2</div>
                <div class="price"><b>¥ 13.5</b></div>
            </li>
        </ul>
    </div>
</div>

</body>
</html>

效果：

7.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_7</title>
    <style>

        .poster {
            width: 450px;
            height: 600px;
            margin: 0 auto;
            background-image: url('./img/2.png');
        }

        .header-cell {
            width: 150px;
            background-color: #dc1d1d;
            color: #FFF;
            text-align: center;
            font-size: 20px;
            padding: 10px;
            border: 0px;
            border-radius: 30px;
            position: relative;
            top: -20px;
        }

        td {
            width: 200px;
            text-align: center;
        }

        .link {
            width: 100px;
            height: 30px;
            display: inline-block;
            padding: 10px 20px;
            background-color: #FFF;
            border: 1px solid #ff7d7d;
            color: #ff4a4a;
            border-radius: 4px;
            text-decoration: none;
        }

        .link:hover {
            background: #bdbdbd;
        }

    .content {
        position: relative;
        top: -50px;
    }

    .content-left {
        position: relative;
        left: 30px;
    }

        .content-right {
            position: relative;
            left: -30px;
        }
    </style>
</head>
<body>

<table class="poster">
    <tr>
        <td colspan="2"><button class="header-cell">精选热点</button></td>
    </tr>
    <tr class="content">
        <td class="content-left"><a href="#link1" class="link">热点商品1</a></td>
        <td class="content-right"><a href="#link2" class="link">热点商品2</a></td>
    </tr>
    <tr class="content">
        <td class="content-left"><a href="#link3" class="link">热点商品3</a></td>
        <td class="content-right"><a href="#link4" class="link">热点商品4</a></td>
    </tr>
    <tr class="content">
        <td class="content-left"><a href="#link5" class="link">热点商品5</a></td>
        <td class="content-right"><a href="#link6" class="link">热点商品6</a></td>
    </tr>
    <tr class="content">
        <td class="content-left"><a href="#link7" class="link">热点商品7</a></td>
        <td class="content-right"><a href="#link8" class="link">热点商品8</a></td>
    </tr>
</table>

</body>
</html>

 效果：

8.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_8</title>
    <style>
        a {
            text-decoration: none;
        }

        #background {
            width: 650px;
            height: 830px;
            background-color: #f1f1f1;
        }

        .element {
            width: 630px;
            height: 180px;
            margin: 10px;
            background-color: white;
            border-radius: 6px;
            position: relative;
            top: 10px;
        }

        .acount {
            width: 200px;
            height: 180px;
            display: inline-block;
        }

        #img {
            width: 70px;
            height: 70px;
            border-radius: 100%;
            align-items: center;
        }

        .plus {
            width: 200px;
            height: 160px;
            display: inline-block;
            background-color: #fede8b;
            border-radius: 8px;
            border: 1px solid gold;
            position: relative;
            top: -10px;
        }

        .vip {
            width: 200px;
            height: 160px;
            display: inline-block;
            background-color: #cddcfe;
            border-radius: 8px;
            border: 1px solid #79c9ff;
            position: relative;
            top: -10px;
        }

        .kill {
            width: 150px;
            height: 160px;
            display: inline-block;
            background-color: #fef0f0;
            border-radius: 8px;
            border: 1px solid #ffe0e0;
            position: relative;
            left: 10px;
        }
        
        .shop {
            width: 110px;
            height: 110px;
            display: inline-block;
            position: relative;
            top: 10px;
            padding: 0px 20px;
        }

        .price {
            font-size: 20px;
            color: #f92a45;
        }

        .icon {
            width: 80px;
            height: 80px;
            display: inline-block;
        }

        #end {
            height: 240px;
        }
    </style>
</head>
<body>
<div id="background">
    <div class="element">
        <div class="acount">
            <table style="text-align: center; width: 180px; height: 150px">
                <tr>
                    <td><img src="img/1.jpg" id="img"></td>
                </tr>
                <tr>
                    <td>Hi, <span style="color: brown">xxx的号</span></td>
                </tr>
                <tr>
                    <td><a href="#">退出</a></td>
                </tr>
            </table>
        </div>
        <div class="plus">
            <table style="text-align: left; width: 180px; height: 150px">
                <tr>
                    <td style="color: #663323; font-size: 25px"><b>Plus会员</b></td>
                </tr>
                <tr>
                    <td style="color: #be9656; font-size: 22px">专享立减</td>
                </tr>
                <tr>
                    <td><a href="#" style="color: #663323; font-size: 18px">立即开通 ></a></td>
                </tr>
            </table>
        </div>
        <div class="vip">
            <table style="text-align: left; width: 180px; height: 150px">
                <tr>
                    <td style="color: #05417f; font-size: 25px"><b>企业会员</b></td>
                </tr>
                <tr>
                    <td style="color: #3d72ac; font-size: 22px">新客补贴3000元</td>
                </tr>
                <tr>
                    <td><a href="#" style="color: #05417f; font-size: 18px">立即开通 ></a></td>
                </tr>
            </table>
        </div>
    </div>
    <div class="element">
        <div class="kill"><img src="img/8.jpg" style="width: 150px;"></div>
        <table style="display: inline-block">
            <tr>
                <td><a href="#"><img src="img/9.jpg" class="shop"></a></td>
                <td><a href="#"><img src="img/9.jpg" class="shop"></a></td>
                <td><a href="#"><img src="img/9.jpg" class="shop"></a></td>
            </tr>
            <tr style="position: relative; top: 20px; text-align: center">
                <td class="price"><b>￥25.5</b></td>
                <td class="price"><b>￥884</b></td>
                <td class="price"><b>￥1999</b></td>
            </tr>
        </table>
    </div>
    <div class="element">
        <div class="kill"><img src="img/10.jpg" style="width: 150px;"></div>
        <table style="display: inline-block">
            <tr>
                <td><a href="#"><img src="img/9.jpg" class="shop"></a></td>
                <td><a href="#"><img src="img/9.jpg" class="shop"></a></td>
                <td><a href="#"><img src="img/9.jpg" class="shop"></a></td>
            </tr>
            <tr style="position: relative; top: 20px; text-align: center">
                <td class="price"><b>￥25.5</b></td>
                <td class="price"><b>￥884</b></td>
                <td class="price"><b>￥1999</b></td>
            </tr>
        </table>
    </div>
    <div class="element" id="end">
        <table style="width: 650px;">
            <tr style="text-align: center">
                <td><a href="#"><img src="./img/11.jpg"></a></td>
                <td><a href="#"><img src="./img/11.jpg"></a></td>
                <td><a href="#"><img src="./img/11.jpg"></a></td>
                <td><a href="#"><img src="./img/11.jpg"></a></td>
                <td><a href="#"><img src="./img/11.jpg"></a></td>
            </tr>
            <tr style="text-align: center">
                <td><a href="#">礼品卡</a></td>
                <td><a href="#">加油卡</a></td>
                <td><a href="#">话费</a></td>
                <td><a href="#">游戏</a></td>
                <td><a href="#">酒店</a></td>
            </tr>
            <tr style="text-align: center">
                <td><a href="#"><img src="./img/11.jpg"></a></td>
                <td><a href="#"><img src="./img/11.jpg"></a></td>
                <td><a href="#"><img src="./img/11.jpg"></a></td>
                <td></td>
                <td></td>
            </tr>
            <tr style="text-align: center">
                <td><a href="#">云建站</a></td>
                <td><a href="#">五金城</a></td>
                <td><a href="#">plus会员</a></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

效果：

9.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css1</title>
    <style>
        @keyframes roll {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        body {
            background-color: #999;
        }

        .box {
            width: 0px;
            height: 300px;
            border-left: 150px solid black;
            border-right: 150px solid white;
            border-radius: 50%;
            position: relative;
            animation: roll 4s linear infinite;
            box-shadow: 0 0 8px 2px rgba(0, 255, 255, 0.8),
            0 0 10px 6px rgba(255, 0, 255, 0.8),
            0 0 12px 8px rgba(0, 255, 0, 0.8);
        }

        .box::before {
            content: "";
            display: block;
            width: 50px;
            height: 50px;
            border: 50px solid black;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            left: -75px;
        }

        .box::after {
            content: "";
            display: block;
            width: 50px;
            height: 50px;
            border: 50px solid white;
            background-color: black;
            border-radius: 50%;
            position: absolute;
            left: -75px;
            top: 150px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果:

 10. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css2</title>
    <style>
        body {
            background-color: black;
            height: 100px;
            margin: 100px;
        }

        .button {
            position: relative;
            padding: 12px 36px;
            margin: 10px;
            color: #5dec98;
            text-decoration: none;
            transition: 0.25s;
            overflow: hidden;
        }

        .button:hover {
            background-color: #2ecc71;
            box-shadow: 0 0 15px #2ecc71, 0 0 20px #4dec91;
            border-color: #2ecc71;
        }

        .button::before, .button::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 2px;
            background: #fff;
            transition: 0.5s;
        }

        .button::before {
            top: 0;
            left: -2px;
        }

        .button::after {
            bottom: 0;
            right: -2px;
        }

        .button span::before, .button span::after {
            content: '';
            position: absolute;
            width: 2px;
            height: 20px;
            background: #fff;
            transition: 0.25s;
        }

        .button span::before {
            top: -2px;
            right: 0;
        }

        .button span::after {
            bottom: -2px;
            left: 0;
        }

        .button:hover::before, .button:hover::after {
            width: 100%;
            transition-delay: 0.25s;
        }

        .button:hover::after{
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 30px;
            background: linear-gradient(rgba(55, 218, 31, 0.68), transparent);
            opacity: 0.5;
        }

        .button:hover span::before, .button:hover span::after {
            height: 100%;
        }
    </style>
</head>

<body>
<a class="button" href="#">点赞<span></span></a>
</body>
</html>

效果：

 

_Sethos
关注
HTML+CSS练习新闻列表
okstudy的博客
05-04 225
【代码】HTML+CSS练习新闻列表。
CSS综合练习
weixin_46331127的博客
06-08 1434
Div+css综合练习一、css小动画二、Div+css练习 一、css小动画 这是我学习css之后写的第一个小动画模型哦，看着有点多，但是不难，都是之前学习内容的衍生，想要学习的就来看看叭 别的不说了，代码粘起来，希望可以帮到你！ <style> #box1{ margin: 0 auto; width: 500px; height: 500px;
HTML-CSS练习例子
pacong的博客
06-09 1977
HTML CSS 练习 https://icodethis.com 作为前端练习生。不敲代码只看，入门是很慢的，所以直接实战是学习前端最快的途径之一。 这个网站练习HTML CSS的，可以打开了解一下，可以每天打卡，例子简单，循序渐进，设计的也比较好看。 下面是练习，当然布局的方法有很多，下面是一种。 01基础 这是第一个练习，但是很多大佬做出了，很多不一样的效果 比如： 设计稿 代码 <!DOCTYPE html> <html lang="en"> <head&
CSS练习之自动打字机
m0_62622679的博客
01-11 1060
使用CSS实现打字机效果
codepen css练习
lsswear的专栏
02-21 201
css 练习
CSS 练习项目教程
gitblog_00371的博客
09-15 788
CSS 练习项目教程 css-exercises 项目地址: https://gitcode.com/gh_mirrors/cs/css-exercises 1. 项目介绍...
CSS练习三(盒子练习)
屈帅波的技术博客
05-23 1807
练习题1 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
HTML+CSS练习小项目——百叶窗
秋刀鱼不做梦的编程日常
05-16 1484
HTML+CSS练习小项目——百叶窗
CSS3练习
weixin_40794404的博客
07-09 563
CSS3练习 教材：CSS设计指南 文章目录CSS3练习思路1. 为盒模型添加阴影2. 将边界赋予圆角效果：3. 居中没有宽度的元素4.关于inline-block：5.过渡动画6.文本阴影7.CSS3 transform结果 思路 确定网页的布局与结构，将它们分割开来，先写出各个主要的结构化标记。 为包含整体的<body>标记等先添加一些基础的CSS，如font-family，background，margin等等，确定一个基准。 逐步对每个结构添加内容并进行样式化。 1. 为盒模型
div css练习div css练习div css练习div css练习
04-20
本练习旨在通过使用div元素结合CSS来提升对页面布局和样式的理解与应用能力。 首先，`div`元素在HTML中是一个通用的容器，它可以包含其他HTML元素，常用于组织和划分页面结构。通过设置div的样式，我们可以控制其在...
html/css练习作业摇晃的桃子
05-05
在本项目"html/css练习作业摇晃的桃子"中，我们可以看到这是一个关于HTML和CSS基础练习的大学作业。HTML（HyperText Markup Language）是网页内容的结构标准，而CSS（Cascading Style Sheets）则负责定义这些内容的...
css_demos:css练习
03-22
CSS练习 下面是markdown语法练习 我是一级标题 我是二级标题 我是三级标题 我是四级标题 我是五级标题 我是六级标题 我是加粗文字我是倾斜文字我是倾斜加粗文字我是加删除线的文字 我是无序列表 我是无序列表 我是...
CSS练习作业（3.10）
03-10
在本“CSS练习作业（3.10）”中，我们将深入探讨CSS（层叠样式表）这一关键的网页设计技术。CSS是用于控制网页元素外观和布局的样式语言，它使得网页设计更加灵活和富有表现力。在这个作业中，我们将专注于通过CSS...
【HTML+CSS练习二】学成在线首页
03-06
【HTML+CSS练习二】学成在线首页是一个学习HTML和CSS基础的实践项目，旨在帮助初学者通过实际操作理解这两种语言的基本用法。这个练习包含了HTML结构和CSS样式设计，以及部分图片素材的使用，使得页面看起来更加生动...
2024 CSS保姆级教程二 - BFC详解
最新发布
qq_37779333的博客
11-04 798
先看下MDN上关于BFC的定义：​​块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。​​具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。​通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。​。
【前端基础】CSS进阶
qq_41413652的博客
11-01 930
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
CSS中综合练习（基础学校完整静态网页教程）！！
CH040708的博客
11-03 372
集合三行、多行多列、百分比布局做的基础学校完整静态网页#
CSS例子: 横向排列的格子
11-01 429
【代码】CSS例子: 横向排列的格子。
CSS练习与答案解析：提升面试准备
"CSS练习答案" 本资源是一份关于CSS的练习题目及答案，旨在帮助学习者检查自己在CSS领域的理解程度，找出知识盲点，并通过解答来提升技能，以更好地应对面试挑战。CSS，全称为Cascading Style Sheets，是一种样式表...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值