精华内容
下载资源
问答
  • css练习

    2017-04-14 21:26:38
    css练习
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            p{
                font-family: "宋体", sans-serif;
                letter-spacing: 15px;
                text-decoration: underline;
            }
            div {
                width: 199px;
                height: 326px;
                background-image: url("img/bg.gif");
                border-radius: 5px;
                overflow: hidden;
            }
            .title{
                margin-top: 35px;
                margin-left: 20px;
                color: #FF6500;
            }
            ul{
                padding: 0;
                margin: 0;
            }
            li{
                margin: 0px;
                padding: 0px;
                list-style: none;
                float: left;
                width: 66px;
                text-align: center;
                font-size: 13px;
                margin-bottom: 18px;
            }
        </style>
        <title>Title</title>
    </head>
    <body>
    <p>
        欢迎来到贵美商城
    </p>
    <div>
        <h4 class="title">家用电器</h4>
        <ul>
            <li>大家电</li>
            <li>洗衣机</li>
            <li>电冰箱</li>
            <li>相机</li>
            <li>电视</li>
            <li>DVD</li>
            <li>相机</li>
            <li>电视</li>
            <li>DVD</li>
        </ul>
        <h4 class="title">家用电器</h4>
        <ul>
            <li>大家电</li>
            <li>洗衣机</li>
            <li>电冰箱</li>
            <li>相机</li>
            <li>电视</li>
            <li>DVD</li>
            <li>相机</li>
            <li>电视</li>
            <li>DVD</li>
        </ul>
    </div>
    </body>
    

    </html>

    展开全文
  • css练习2

    2017-04-14 21:23:10
    css练习
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            div{
                background-color: #19242C;
                width: 300px;
                height: 300px;
                color: white;
                box-sizing: border-box;
            }
            ul{
                list-style: none;
                padding: 0px;
                margin: 0px;
                text-align: center;
                width: 100%;
                height: 100%;
                margin-left: 50px;
            }
            li{
                background-image: url("img/ico.png");
                background-repeat: no-repeat;
                width: 20px;
                height: 40px;
                white-space: nowrap;
                line-height: 40px;
                text-indent: 25px;
            }
            #l1{
                background-position: 2px 10px;
            }
            #l2{
                background-position: -20px 10px;
            }
            #l3{
                background-position: -40px 10px;
            }
            #l4{
                background-position: -60px 10px;
            }
            #l5{
                background-position: -80px 10px;
            }
        </style>
        <title>Title</title>
    </head>
    <body>
    <div>
        <h2>联系我们</h2>
        <ul>
            <li id="l1">总机:0427-3293318</li>
            <li id="l2">总机:0427-3293318</li>
            <li id="l3">总机:0427-3293318</li>
            <li id="l4">总机:0427-3293318</li>
            <li id="l5">总机:0427-3293318</li>
        </ul>
    </div>
    
    </body>
    </html>
    展开全文
  • html css 练习素材

    2021-01-02 10:15:08
    html css 练习素材
  • css练习答案

    2018-04-08 15:38:47
    css练习答案,帮助你找到自己的不足之处,补充知识,赢下面试!
  • mydome Css练习

    2012-07-22 21:31:02
    mydome Css练习
  • html-css:HTML和CSS练习
  • css练习单页html模板下载
  • CSS练习基本模板

    2015-11-01 20:28:19
    很好的 CSS练习模板 PHP
  • CSS练习CSS练习侧重于盒模型
  • bootstrap.mini.css练习

    2021-07-28 10:29:37
    bootstrap.mini.css练习
  • 单页简洁css练习html模板下载
  • GoogleClone HTML和CSS练习
  • css练习例子

    2020-08-04 00:14:55
    Css练习1.1 小米导航栏1.2 新浪导航栏 1.1 小米导航栏 html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" ...

    1.1 小米导航栏

    在这里插入图片描述
    html

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<link rel="stylesheet" href="css/xiaomi.css">
    	</head>
    	<body>
    		<div id="blue">
    			<a href="#">手机 电话卡</a>
    			<a href="#">电视 盒子</a>
    			<a href="#">笔记本 显示器</a>
    			<a href="#">家电 插线板</a>
    			<a href="#">出行 穿戴</a>
    			<a href="#">智能 路由器</a>
    			<a href="#">电源 路由器</a>
    			<a href="#">电源 配件</a>
    			<a href="#">健康 儿童</a>
    			<a href="#">耳机 音箱</a>
    		</div>
    	</body>
    </html>
    
    

    css

    
    #blue {
    	background-color: #3f9698;
    	height: 420px;
    	width: 234px;
    	padding: 20px 0px;
    }
    a {
    	color: white;
    	display:block;
    	height: 42px;
    	text-decoration: none;
    	text-indent: 2em;
    	line-height: 42px;
    }
    a:hover {
    	background-color: #ff6700;	
    }
    

    1.2 新浪导航栏

    在这里插入图片描述

    html

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<link rel="stylesheet" href="css/xinlang.css">
    	</head>
    	<body>
    		<div class="orange">
    			<a href="#">设为首页</a>
    			<a href="#">手机新浪网</a>
    			<a href="#">移动客户端</a>
    			<a href="#">登录</a>
    			<a href="#">微博</a>
    			<a href="#">博客</a>
    			<a href="#">邮箱</a>
    			<a href="#">网站导航</a>
    		</div>
    	</body>
    </html>
    
    

    css

    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    .orange {
    	width: 1349px;
    	height: 43px;
    	border-bottom: 1px solid #eee;
    	border-top: 2px solid orange;
    	text-align: center;
    }
    
    a {
    	display: inline-block;
    	height: 44px;
    	line-height: 44px;
    	text-decoration: none;
    	color: black;
    	padding:0 20px;
    	
    }
    a:hover {
    	color: orange;
    	background-color: #eee;
    }
    

    1.3 小米图标

    在这里插入图片描述

    html

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<link rel="stylesheet" href="css/icon.css">
    	</head>
    	<body>
    		<a href="#" class="logo">
    		</a>
    	</body>
    </html>
    
    

    css
    
    * {
    	padding: 0;
    	margin: 0;
    }
    
    .logo {
    	display: block;
    	margin: 0 auto;
    	width: 55px;
    	height: 55px;
    	background-color: #ff6700;
    	background-image: url(../logo.png);
    	transition: background-image .7s,background-position .7s;
    	
    }
    
    .logo:hover{
    	background-image: url(../home.png);
    	background-position:center center;
    } 
    
    

    1.4 学成在线网站

    浮动练习

    在这里插入图片描述


    1.5 京东售价盒子


    在这里插入图片描述


    HTML

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			.box {
    				height: 25px;
    				width: 158px;
    				border: 1px solid #e1251b;
    			}
    			.now {
    				position: relative;
    				display:inline-block;
    				line-height: 25px;
    				text-align: center;
    				width: 95px;
    				height: 25px;	
    				background-color: #E1251B;
    			}
    			.now i {
    				height: 0;
    				width: 0;
    				position: absolute;
    				top: 0;
    				right:0;
    				border-color: transparent white transparent transparent; 
    				border-style: solid;
    				border-width: 25px 5px 0 0;	
    			}
    			.origin {
    				display:inline-block;
    				width: 50px;
    				height: 25px;
    				line-height: 25px;
    				font-size: 10px;
    				text-align: center;
    				text-decoration: line-through;
    				color:#999999;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box">
    			<span class="now">
    				¥99
    				<i></i>
    			</span>
    			<span class="origin">¥129</span>
    		</div>
    	</body>
    </html>
    
    

    跟着b站的pink老师学习前端基础,看完视频自己敲代码练习加深记忆。

    我是一只努力飞的菜鸟,大家一起加油吧。
    如有错误,请指出,大家一起进步哦!
    2020/08/04

    展开全文
  • css练习单页简洁html网站模板下载
  • 宠物小猫xhtml+css练习模板下载
  • css练习:商品分类

    千次阅读 2017-04-14 21:18:40
    css练习,商品分类
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            ul{
                list-style: none;
                width: 180px;
                height: 250px;
                border: 1px solid orange;
                padding:0;
                margin: 0;
                text-align: center;
                border-radius: 20px;
                padding-left: 10px;
                padding-right: 10px;
            }
            li{
                padding-top: 10px;
                padding-bottom: 10px;
                border-bottom: 2px solid #cccccc;
    
            }
            #first{
                margin-top: 15px;
                border-bottom: 2px solid orange;
                padding-bottom: 10px;
                color: orange;
            }
            #last{
                border-bottom: none;
            }
        </style>
        <title>商品分类</title>
    </head>
    <body>
    <ul>
        <li id="first">商品分类</li>
        <li>分类1</li>
        <li>分类2</li>
        <li>分类3</li>
        <li id="last">分类4</li>
    </ul>
    
    
    </body>
    </html>
    展开全文
  • HTML餐厅 DigitalHouse HTML / CSS练习
  • CSS-exercise-TinDogWebsite:Web开发课程中CSS练习,第7节
  • css练习示例.rar

    2009-03-07 08:10:47
    css练习示例.rarcss练习示例.rarcss练习示例.rarcss练习示例.rar
  • pc端css练习

    2017-04-01 14:22:20
    pc端css练习,主要是练习布局
  • Maktabsharif-Exercises:MaktabSharif练习-登录表单和简单页面-此练习使用HTML,CSS(flex)构建-您可以将其用于课程和简单项目,甚至用于HTML和CSS练习
  • EDX响应式HTML / CSS练习 描述 复制Google搜索 使用的文件 HTML和CSS文件 学分 对于此项目,我们使用了: EDX HTML / CSS文档 堆栈溢出 W3school CSS文档 HTML文档 响应式设计文档(CSS flexbox和媒体查询) 编程...
  • Batatabit 使用html和css练习到网页:移动优先
  • 电子邮件表格 关于构建表单HTML和CSS练习
  • html,css练习

    2020-11-04 10:33:17
    html,css练习题 一. 选择题 在下列的 HTML 中,哪个可以产生超链接. B A. <a url="http://www.dapengjiaoyu.com">啦啦啦</a> B. <a href="http://www.dapengjiaoyu.com">啦啦啦</a> C. <...
  • 练习HTML-CSS。 HTML和CSS非常有趣!( ̄︶ ̄ *))
  • google-homepage:HTMLCSS练习-使用Chrome开发人员工具重新创建Google主页
  • css练习,求助

    2020-11-17 01:37:46
    style type="text/css"> *{ background-color: red; background-attachment: fixed; background-size: 100% 100%; background-repeat: no-repeat; margin: 0; padding: 0; } .top{ position:...
  • html、css练习

    千次阅读 2018-09-12 15:52:59
    1. 网络慢的时候,会只加载html内容,不加载css样式,页面只显示html的文字内容。    显示的效果:  解决办法(1): a { display: inline-block; width: 190px; height: 140px; border: 1px solid ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,838
精华内容 21,535
关键字:

css练习