HTML5+CSS3集训（5）

最新推荐文章于 2024-06-29 23:22:36 发布
最新推荐文章于 2024-06-29 23:22:36 发布
阅读量306 收藏
点赞数 10
文章标签： html5 css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78986604/article/details/139997160
版权

t5元素类型转换案列实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p83</title>
    <style>
    *{margin: 0;padding: 0;}
    li{
        display:inline-block;
        width:200px;
        height:250px;
        border:1px dotted skyblue;
    }
    div{
        width:1300px;
        margin:0px auto;
        margin-top:150px;
        border:1px solid black;
    }
    a{
        text-decoration:none;
        margin:0px auto;
    }
    </style>
</head>
<body>
<div>
    <ul>
        <li>
            <a href="">天猫冰箱节</a>
        </li>
        <li>
            <a href="">泉阳泉</a>
        </li>
        <li>
            <a href="">农夫山泉</a>
        </li>
        <li>
            <a href="">巧克力</a>
        </li>
        <li>
            <a href=""></a>
        </li>
    </ul>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p83</title>
    <style>
    *{margin: 0;padding: 0;}
    li{
        display:inline-block;
        width:200px;
        height:250px;
        border:1px dotted skyblue;
    }
    div{
        width:1300px;
        margin:0px auto;
        margin-top:150px;
        border:1px solid black;
    }
    a{
        text-decoration:none;
        margin:0px auto;
    }
    </style>
</head>
<body>
<div>
    <ul>
        <li>
            <a href="">天猫冰箱节</a>
        </li>
        <li>
            <a href="">泉阳泉</a>
        </li>
        <li>
            <a href="">农夫山泉</a>
        </li>
        <li>
            <a href="">巧克力</a>
        </li>
        <li>
            <a href="">水果</a>
        </li>
    </ul>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p83</title>
    <style>
    body{
        background-color:#ccc;
    }
    li{
        display:inline-block;
        width:200px;
        height:250px;
        border:1px dotted skyblue;
        background-color:#fff;
        padding:20px;
        list-style:none;
    }
    a{
        text-decoration:none;
        margin:0px auto;
    }
    p{
        font-size:14px;
        color:grey;
    }
    img{
        width:90px;
        height:120px;
        margin-left:80px;
        margin-top:30px;
    }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="">天猫冰箱节</a>
            <p>活动特价95折</p>
            <img src="酸奶.jpg" alt="">
        </li>
        <li>
            <a href="">泉阳泉</a>
        </li>
        <li>
            <a href="">农夫山泉</a>
        </li>
        <li>
            <a href="">巧克力</a>
        </li>
        <li>
            <a href="">水果</a>
        </li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p83</title>
    <style>
    body{
        background-color:#ccc;
    }
    li{
        display:inline-block;
        width:200px;
        height:250px;
        border:1px dotted skyblue;
        background-color:#fff;
        padding:20px;
        list-style:none;
    }
    a{
        text-decoration:none;
        margin:0px auto;
    }
    p{
        font-size:14px;
        color:grey;
    }
    img{
        width:90px;
        height:120px;
        margin-left:80px;
        margin-top:30px;
    }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="">天猫冰箱节</a>
            <p>活动特价95折</p>
            <img src="酸奶.jpg" alt="">
        </li>
        <li>
            <a href="">泉阳泉</a>
            <p>2元一瓶</p>
        </li>
        <li>
            <a href="">农夫山泉</a>
            <p>1.5元一瓶</p>
        </li>
        <li>
            <a href="">巧克力</a>
        </li>
        <li>
            <a href="">水果</a>
        </li>
    </ul>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p83</title>
    <style>
    ul{
        margin:200px auto;
    }
    body{
        background-color:#ccc;
    }
    li{
        display:inline-block;
        width:200px;
        height:250px;
        border:1px dotted skyblue;
        background-color:#fff;
        padding:20px;
        list-style:none;
    }
    a{
        text-decoration:none;
        color:#000;
    }
    p{
        font-size:14px;
        color:#64c333;
    }
    img{
        width:160px;
        height:120px;
        margin-left:40px;
        margin-top:30px;
    }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="">天猫冰箱节</a>
            <p>活动特价95折</p>
            <img src="酸奶.jpg" alt="">
        </li>
        <li>
            <a href="">泉阳泉</a>
            <p>2元一瓶</p>
            <img src="泉阳泉.png" alt="">
        </li>
        <li>
            <a href="">农夫山泉</a>
            <p>1.5元一瓶</p>
            <img src="农夫山泉.jpg" alt="">
        </li>
        <li>
            <a href="">巧克力</a>
            <p>比较甜</p>
            <img src="巧克力.jpg" alt="">
        </li>
        <li>
            <a href="">水果</a>
            <p>一周吃几次就够了</p>
            <img src="水果.webp" alt="">
        </li>
    </ul>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p83</title>
    <style>
    
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="">天猫冰箱节</a>
            <p>活动特价95折</p>
            <img src="酸奶.jpg" alt="">
        </li>
        <li>
            <a href="">泉阳泉</a>
            <p>2元一瓶</p>
            <img src="泉阳泉.png" alt="">
        </li>
        <li>
            <a href="">农夫山泉</a>
            <p>1.5元一瓶</p>
            <img src="农夫山泉.jpg" alt="">
        </li>
        <li>
            <a href="">巧克力</a>
            <p>比较甜</p>
            <img src="巧克力.jpg" alt="">
        </li>
        <li>
            <a href="">水果</a>
            <p>一周吃几次就够了</p>
            <img src="水果.webp" alt="">
        </li>
    </ul>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p83</title>
    <style>
    body,ul,li,h3,p{
    margin: 0;padding: 0;
    }
    li{
        list-style:none;
    }
    body{
        background-color:#ccc;
    }
    ul{
        width:1200px;
        height:220px;
        margin:100px auto;
    }
    li{
        display:inline-block;
        width:216px;
        height:200px;
        padding-top:20px;
        padding-left:20px;
        background-color:#fff;
    }
    a{
        color:#000;
        text-decoration:none;
        font-size:14px;
    }
    p{
        color:#64c333;
        font-size:14px;
    }
    img{
        width:154px;
        margin-left:60px;
       
    }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="">天猫冰箱节</a>
            <p>活动特价95折</p>
            <img src="酸奶.jpg" alt="">
        </li>
        <li>
            <a href="">泉阳泉</a>
            <p>2元一瓶</p>
            <img src="泉阳泉.png" alt="">
        </li>
        <li>
            <a href="">农夫山泉</a>
            <p>1.5元一瓶</p>
            <img src="农夫山泉.jpg" alt="">
        </li>
        <li>
            <a href="">巧克力</a>
            <p>比较甜</p>
            <img src="巧克力.jpg" alt="">
        </li>
        <li>
            <a href="">水果</a>
            <p>一周吃几次就够了</p>
            <img src="水果.webp" alt="">
        </li>
    </ul>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p83</title>
    <style>
    body,ul,li,h3,p{
    margin: 0;padding: 0;
    }
    li{
        list-style:none;
    }
    body{
        background-color:#ccc;
    }
    ul{
        width:1200px;
        height:220px;
        margin:100px auto;
    }
    li{
        display:inline-block;
        width:216px;
        height:200px;
        padding-top:20px;
        padding-left:20px;
        background-color:#fff;
    }
    a{
        color:#000;
        text-decoration:none;
        font-size:14px;
    }
    p{
        color:#64c333;
        font-size:14px;
    }
    img{
        width:154px;
        margin-left:60px;
       height:120px;
    }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="">天猫冰箱节</a>
            <p>活动特价95折</p>
            <img src="酸奶.jpg" alt="">
        </li>
        <li>
            <a href="">泉阳泉</a>
            <p>2元一瓶</p>
            <img src="泉阳泉.png" alt="">
        </li>
        <li>
            <a href="">农夫山泉</a>
            <p>1.5元一瓶</p>
            <img src="农夫山泉.jpg" alt="">
        </li>
        <li>
            <a href="">巧克力</a>
            <p>比较甜</p>
            <img src="巧克力.jpg" alt="">
        </li>
        <li>
            <a href="">水果</a>
            <p>一周吃几次就够了</p>
            <img src="水果.webp" alt="">
        </li>
    </ul>
</body>
</html>

 

超越～and me
关注
  • 10
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5+css3+js登录页面
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
html5+css3+JS代码
05-22
在本篇文章中，我们将深入探讨这三种技术的详细知识点，并结合《精通html5+css3+JavaScript页面设计》这本书中的实践代码进行说明。 首先，HTML5（超文本标记语言第五版）是描述网页内容的标准语言。它引入了许多新...
HTML5+CSS3集训（3）
2301_78986604的博客
06-26 166
t3盒模型边框绘制三角形。
HTML5+CSS3集训（6）
2301_78986604的博客
06-26 293
【代码】HTML5+CSS3集训（6）
HTML5+CSS3集训（1）
2301_78986604的博客
06-26 174
【代码】HTML5+CSS3集训（1）
HTML5+CSS3集训（13）
2301_78986604的博客
06-28 195
【代码】HTML5+CSS3集训（13）
HTML5+CSS3集训（4）
2301_78986604的博客
06-26 121
t4列表样式案例实践。
HTML5+CSS3集训（2）
2301_78986604的博客
06-26 304
t2插入多媒体。
HTML5+CSS3集训（9）
2301_78986604的博客
06-27 53
【代码】HTML5+CSS3集训（10）
HTML5+CSS3集训（10）
2301_78986604的博客
06-27 91
【代码】HTML5+CSS3集训（10）
HTML5+CSS3集训（12）
2301_78986604的博客
06-27 210
和是 CSS 属性，分别用于给元素盒子和文本添加阴影效果。
HTML5+CSS3移动商城-分类
04-29
HTML5+CSS3移动商城-分类
HTML5+CSS3 精美登陆界面源码
01-19
3个很精美的登陆界面，全都是用HTML5+CSS3开发的，所以可能不适合低版本IE浏览器。大家可以下来看看，做的超级漂亮的。
HTML5+CSS3
09-17
该文档是HTML5+CSS3的总结笔记，把工作中的常用的知识点个记录下来，仅供学习和工作的参考资料，不做商业用途，版权归本人所有，侵权必究！
HTML5实现字母记忆配对游戏
cnds123的专栏
06-26 289
HTML5实现字母记忆配对游戏
API-节点操作
m0_64105917的博客
06-29 321
节点操作
前端Web开发HTML5+CSS3+移动web视频教程 Day3 CSS 第1天
最新发布
chengkai730的博客
06-29 614
Day3 CSS 第1天
TS_类型
分享程序相关知识
06-29 578
typescripe类型相关知识点。
关于元旦节日的HTML5+css3
12-12
很抱歉，根据您提供的引用内容，似乎没有关于元旦节日的HTML5+CSS3的内容。但是，我可以为您提供一些关于春节的HTML5+CSS3的内容。 以下是HTML5+CSS3实现春节主题的一些方法和步骤： 1.使用CSS3实现动画效果 ```css @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } } ``` 2.使用CSS3实现渐变效果 ```css background: linear-gradient(to right, #ff9966, #ff5e62); ``` 3.使用CSS3实现阴影效果 ```css box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); ``` 4.使用HTML5的canvas标签绘制春节主题图案 ```html <canvas id="myCanvas"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#ff9966"; ctx.fillRect(0, 0, 150, 75); </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值