div、css入门练习

最新推荐文章于 2023-02-24 09:47:55 发布
最新推荐文章于 2023-02-24 09:47:55 发布
阅读量476 收藏
点赞数
分类专栏： 自学网站的使用心得
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jackliang1221/article/details/46945831
版权

index.html文件

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 </head><link rel="stylesheet" type="text/css" href="css/index.css"/>
  
 <body>
 <div class="logo">
 <div class="bculogo"><img src="images/bculogo.jpg" width="300" height="96" alt="bculogo" /></div>
 <div class="ad"><img src="images/ad.jpg" width="690" height="96" alt="ad" /></div>
 </div>
 <div class="nav">此处显示 class "nav" 的内容
  
 </div>
 <div class="fn">
 <div class="flash">此处显示 class "flash" 的内容</div>
 <div class="news">此处显示 class "news" 的内容</div>
 </div>
 <div class="pic">此处显示 class "pic" 的内容</div>
 <div class="nav2">此处显示 class "nav2" 的内容</div>
 <div class="copy">
 <p>CopyRight © 2014-2016 All Rights Reservered . Powered by Woo.</p>
 <p>版权所有： 北京城市学院 艺术系 201405040103 梁士伟 </p>
 </div>
index.css文件</html>
/*logo*/
.logo {background-color: #C3C;height: 96px;width: 990px; margin:0 auto;}
.bculogo {height: 96px;width: 300px;float: left;}
.ad {float: right;height: 96px;width: 690px;}

/*dav*/
.nav {background-color: #6F6;height: 30px;width: 990px; margin:5px auto;}
.fn {background-color: #F00;height: 320px;width: 990px; margin:5px auto;}

.flash {background-color: #00F;float: left;height: 320px;width: 655px;}
.news {background-color: #906;float: right;height: 320px;width: 320px;}
.pic {background-color: #F66;height: 250px;width: 990px; margin:5px auto;}
.nav2 {background-color: #0FF;height: 40px;width: 990px; margin:5px auto;}
.copy {background-color: #FCF;height: 50px;width: 990px; margin:5px auto; border-top:solid #930 2px; background: url(../images/logo-blue.gif) no-repeat right center; padding-top:12px;}

.copy p { font-size: 12px; line-height: 10px;text-indent: 24px;}

{ margin:0; padding:0;}//css.css用于


url必须为站点文件内的图片；
images 
 
 
 
  
  
  
  
  
 
 

jackliang1221
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div布局练习
b150461的博客
10-19 611
简单div布局练习 最近看了一下尚硅谷的视频，李立超讲师讲的很细致，大体上又看了一遍。讲的很透彻很适合零基础的朋友。 练习一下标签，把写好的东西备份一下。以后有空了可以复习下。 手绘图： 效果图： **** ...
CSS入门 练习
DonkeyL's
02-19 1942
CSS入门 练习CSS练习1 -- 画三角形CSS练习2 -- 画太极 CSS练习1 – 画三角形 代码： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;style type="text/css&
HTML+Div+Css 入门练习
weixin_34306593的博客
03-26 302
/*这是一个简单的由div+Css布局而成的页面，页面整体用id选择器体分四部分，即header ，nav，content 和tooter，其中header又用div分成了logo，banner和tool三部分，在banner里面放了一个可移动的文字<marquee>标签，而content用class选择器分为main和barside两部分，main用同样的方法分...
html中div定位练习
weixin_33962621的博客
12-16 436
html中div定位练习，实现简单的计划列表：记录div定位时主要的属性：float、position等，以及对应的relative和absolute等，同时使用到angular js中的数据绑定，$http请求等等，记录备忘： login.css中代码： /* 主页面数据列表 */ .planWrite{ background-color: #...
div布局的小练习~
weixin_59418570的博客
02-24 294
两个简单的布局练习！
CSS-三角形的div框框
LuckyGuyy的博客
11-28 406
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
css浮动练习
一虹的博客
08-17 498
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/xuechengwang.css"> </head> <body> <!-- 头部高100，版心1560 --> <div class="h.
div+css入门资料
05-24
【div+css入门资料】 网页设计中，Div和CSS（Cascading Style Sheets）是构建高效、可维护、响应式布局的重要技术。Div是HTML中的一个元素，常用于定义页面上的区块，而CSS则用来控制这些区块的样式、布局和表现。...
DIV+CSS入门
09-28
【DIV+CSS入门】是网页设计领域中的基础知识，它代表了两种主要的Web页面布局技术。在HTML（超文本标记语言）中，`<div>`元素是一个通用的容器，用于组织文档中的内容，而CSS（层叠样式表）则负责控制这些内容的样式...
CSS+DIV练习题
05-07
这是我自己整理出来的CSS+DIV练习题，非常全面，里面有单选、多选、判断、填空、问答、编程题。
简单div框架练习
05-02
简单的div排版
div+css入门教程.rar
07-07
《div+css入门教程》是一份专为初学者设计的学习资料，旨在帮助用户快速掌握网页布局与样式的最基本技能。这个教程可能包含了理论讲解、实例演示以及实践练习等多个部分，以确保学习者能够全面理解并熟练运用div和...
webgis入门之html与css (练习2)
最新发布
02-26
本文将深入探讨这两个关键技术，并结合"webgis入门之html与css (练习2)"这一主题，来理解它们在WebGIS中的应用。 HTML是用于创建网页结构的语言，它定义了网页的基本元素，如标题、段落、图像、链接等。在WebGIS中...
HTML学习日记（五）——div
zw的博客
12-21 588
一、div的定义和用法 ＜div＞可定义文档中的分区或节。＜div＞标签可以把文档分为独立的、不同的部分。如果用id和class来标记＜div＞，那么该标签的作用会变得更加有效。 ＜div＞是一个块级元素，它的内容会自动换行，即浏览器通常会在＜div＞标签前后放置一个换行符；实际上，换行是＜div＞固有的唯一格式表现，可以通过＜div＞的class或id应用额外的样式。 应用class或id作为＜div＞的属性，一般class用于元素组（或是说某一类元素），而id用于标识唯一的元素。 二、div的练习 练习
练习 | div ul li 导航栏 目标50个+分析
A123ppleQueen的博客
10-12 1783
第一大类 初始情况，一个div里包括了ul--4个li ,div背景色蓝色，li背景色绿色，去掉了li自带的符号，li进行了浮动，现在以它为目标，发散成多种导航样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> li{ list-style: none; float: l..
CSS详细介绍+练习
m0_46152474的博客
02-20 273
CSS渲染
学习CSS3这一篇就够了
热门推荐
轻松的小希
11-25 4万+
目录CSS第一章 CSS概述1.1、概述1.2、语法1.3、注释1.4、如何创建并引用1.4.1、外部样式表（外联式）1.4.2、内部样式表（内联式）1.4.3、内联样式（行内式）1.5、三种引入优先级第二章 CSS选择器2.1、id选择器2.2、class选择器2.3、标签选择器2.4、子代选择器2.5、后代选择器2.6、相邻兄弟选择器2.7、后续兄弟选择器2.8、交集选择器2.9、并集选择器2.10、通配符选择器2.11、伪类选择器2.11.1、anchor伪类2.11.2、input伪类2.11.3、
CSS之初学入门
qq_53977993的博客
10-09 117
适合CSS初学者的简单讲解。
DIV+CSS入门学习指南
“这是一份关于div+css入门的教程，适合初学者，旨在帮助理解页面布局与规划，以及如何使用div+css进行网页设计。” 在网页设计领域，`div+css`是一种常见的布局技术，它使得网页结构和样式分离，提高了代码的可...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值