css练习

最新推荐文章于 2024-06-09 20:46:21 发布
最新推荐文章于 2024-06-09 20:46:21 发布
阅读量261 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuzhilu/article/details/90409294
版权

 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>练习</title>
  <style type="text/css">
    a{color:#630;font-size:12px;margin:0 8px;text-decoration:none;} 
    a:hover{color:#c60;text-decoration:underline;cursor: point}

    .buy-box{
        padding-left:30px;
        width:80px;
        height:35px;
        border:1px #dfdfdf solid;
        line-height:35px;
        font-size:14px;
        background:url(img/buy.png) no-repeat #f9f9f9 10px center;
        }
        
    ul li{
      /* list-style-type: circle; */
      list-style-position:outside;
      }
      
    ol li{
       list-style-image: url("img/arrow.png");
       list-style-position:inside;
       }
    /*  仿京东左侧菜单 */
     div *{padding:0;margin:0;}
     div a{text-decoration:none;color:#fff;}
        .nav-top{
            height:45px;
            font-size:16px;
            line-height:45px;
            padding:0 10px;
            background:#B1191A;
            color:#fff;
        }
        div ul{background:#c81623;list-style:none;}
        div li{
            height:30px;
            line-height:30px;
            font-size:14px;
            padding-left:8px;
            color:#fff;
            background:url(img/bg.png) no-repeat 195px center;
        }
    
       
  </style>
 </head>
 <body>
    <h4>CSS超链接</h4>
    <p><a href="">社科经典</a><a href="">文学名著</a><a href="">政治军事</a></p>
    <p><a href="">经济管理</a></p>
    <p><a href="">计算机工程</a></p>
    <br/>
    <h4>CSS超链接，鼠标的样式设置</h4>
    <p style="cursor:wait;">等待的结果</p>
    <br/>
    <h4>背景样式设置</h4>
    <div class="buy-box">我的购物车</div>
    <br/>
    <h4>无序列表</h4>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>西红柿</li>
        <li>菠萝</li>        
    </ul>

    <h4>有序列表</h4>
    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>西红柿</li>
        <li>菠萝</li>        
    </ol>
    <br/>
    <h4>仿京东左侧菜单</h4>
    <div class="nav-box">
        <div class="nav-top">全部商品分类</div>
        <ul>
            <li><a href="">家用电器</a></li>
            <li><a href="">手机</a>、<a href="">数码</a>、<a href="">京东通信</a></li>
            <li><a href="">电脑</a>、<a href="">办公</a></li>
            <li><a href="">家居</a>、<a href="">家具</a>、<a href="">家装</a>、<a href="">厨具</a></li>
            <li><a href="">男装</a>、<a href="">女装</a>、<a href="">珠宝</a></li>
            <li><a href="">个护化妆</a></li>
            <li><a href="">鞋靴</a>、<a href="">箱包</a>、<a href="">钟表</a>、<a href="">奢侈品</a></li>
            <li><a href="">运动户外</a></li>
        </ul>
    </div>
    
 </body>
</html>

 

  

Y-AND-M
关注
专栏目录
CSS综合练习
weixin_46331127的博客
06-08 1415
Div+css综合练习一、css小动画二、Div+css练习 一、css小动画 这是我学习css之后写的第一个小动画模型哦，看着有点多，但是不难，都是之前学习内容的衍生，想要学习的就来看看叭 别的不说了，代码粘起来，希望可以帮到你！ <style> #box1{ margin: 0 auto; width: 500px; height: 500px;
div css练习div css练习div css练习div css练习
04-20
本练习旨在通过使用div元素结合CSS来提升对页面布局和样式的理解与应用能力。 首先，`div`元素在HTML中是一个通用的容器，它可以包含其他HTML元素，常用于组织和划分页面结构。通过设置div的样式，我们可以控制其在...
CSS练习
qq_44125413的博客
02-14 456
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .h3,.p1{ background-color: cornflowerblue; color: white; text-align: center; } .c{ bac...
html、css练习题
zyz00000000的博客
09-12 6873
1. 网络慢的时候，会只加载html内容，不加载css样式，页面只显示html的文字内容。    显示的效果：  解决办法（1）： a { display: inline-block; width: 190px; height: 140px; border: 1px solid black; background-image: url(ht...
jquery实现购物车页面（小计，合计功能）
misshow
12-21 4355
Html部分 &amp;lt;html&amp;gt; &amp;lt;body&amp;gt; &amp;lt;!-- 购物车开始 --&amp;gt; &amp;lt;form class=&quot;buyCar&quot;&amp;gt; &amp;lt;!-- 购物车上部开始 --&amp;gt; &amp;lt;div class=&qu
DIV+CSS首页布局练习
Abenazhan的博客
05-31 5335
新建外部样式，html中设置<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >表示文件格式，在加入<link rel="stylesheet" type="text/css" href="css/hh.css"> 引入外部css链接最先布局一个最外面的层，设置宽度960像素，临时高度800像...
HTML-CSS练习例子
最新发布
pacong的博客
06-09 1878
HTML CSS 练习 https://icodethis.com 作为前端练习生。不敲代码只看，入门是很慢的，所以直接实战是学习前端最快的途径之一。 这个网站练习HTML CSS的，可以打开了解一下，可以每天打卡，例子简单，循序渐进，设计的也比较好看。 下面是练习，当然布局的方法有很多，下面是一种。 01基础 这是第一个练习，但是很多大佬做出了，很多不一样的效果 比如： 设计稿 代码 <!DOCTYPE html> <html lang="en"> <head&
CSS练习之自动打字机
m0_62622679的博客
01-11 1043
使用CSS实现打字机效果
codepen css练习
lsswear的专栏
02-21 202
css 练习
CSS练习三(盒子练习)
屈帅波的技术博客
05-23 1745
练习题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-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样式设计，以及部分图片素材的使用，使得页面看起来更加生动...
JavaScript查找字符中含有a、A的字符串个数
Y-A-M
05-16 7679
//统计包含“a”或“A”的字符串的个数 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS</title> </head> <body> <script type="text/javascript"> va...
CSS表单练习
Y-A-M
05-21 365
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
CSS练习2
Y-A-M
05-24 275
#display属性 块级元素 内联元素 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值