CSS 构造设计

最新推荐文章于 2024-04-26 15:21:52 发布
最新推荐文章于 2024-04-26 15:21:52 发布
阅读量401 收藏
点赞数
分类专栏： http 文章标签： CSS 布局 框架 搜索 设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwdsmileface/article/details/38687517
版权

<head>

<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />

<title>用户注册页面</title>

<link href="css/mycss.css"rel="stylesheet" type="text/css" />

   <style type="text/css">

       /*标签选择器*/

     input,select{

                border-width:0px;

                /*border-bottom-color:#F00;

                border-bottom-width:3px;

                border-bottom-style:dotted;*/

                border-bottom:#F00 3px dotted;

                background-color:#FCF;

     }   

         /*类选择器*/

         .myClass{

               background-color:#6FF;

                border-bottom-style:dashed;

         }

         tr.OddColor {color:red}

         tr.EvenColor {color:blue}

         /*ID选择器*/

         #information{

                background-image:url(images/xx.jpg);

                background-repeat:no-repeat;

                background-position:30px 30px;

                background-attachment:scroll;           

         }

         #myButton{

                background-color:blue;

         }

         .myButtonClass{

                background-color:red;               

         }`

   </style>

</head>

<body>

 <form method="post" action="http://www.baidu.com">

   <table border="1">

     <input type="reset" value="取消注册" id="myButton"class="myButtonClass" style="border-bottom:#F00;border-left-color:#36C;border-top-width:5px; border-top-color:#063; padding-top:5px; margin-left:30px;background-color:black;"/>——行选择

   </table>

 </form>

</body>

</html>

外部选择器

在站点建立一个.css文件，把格式放在文件中。

布局：

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

       .myMenu{——————设置myMenu类格式

              list-style-type:none

       }

       .myMenuli{————————设置myMenu类中li格式

              float:left;————————将li里面的内容向右排列

              width:70px;

              background:url(image.jpg)no-repeat 0 0;

              margin:3px;——————所有外边距属性

              padding-left:5px;————所有内边距属性

       }

       a{————————————设置<a>标签格式

              text-decoration:none;

              font-weight:bold;

       }

       a:hover{——————————当鼠标移动<a>标签

              background:url(banner.jpg)no-repeat 0 0;

              color:#F00;

       }

       .myMenu1{

              list-style-type:none;

              width:200px;

              height:500px;

              border:#C001px dashed;

              padding-left:4px;

       }

       .myMenu1li{

              float:left; 

              width:40px;

              margin:3px;

              padding-left:5px;

       }

       dl{

              width:300px;

              border:#C001px dashed;

              float:left;

              margin:5px;

       }

       dldt{

              float:left;

       }

       dldd{

              margin:  0px;

              border:#C001px dashed;

       }

</style>

</head>

 

<body>

<ul class="myMenu">

       <li><ahref="#">首页</a></li>

   <li><a href="#">新闻</a></li>

   <li><a href="#">咨询</a></li>

   <li><a href="#">部门</a></li>

   <li><a href="#">联系我们</a></li>

</ul>

<divstyle="clear:both;"></div>

<ol class="myMenu1">

       <li><ahref="#">首页</a></li>

   <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>

   <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>

</ol>

<divstyle="clear:both;"></div>

<dl>

   <dt>

           <img src="image.jpg"width="100" height="80"/>

   </dt>

   <dd>

           春华秋实您查询的关键词仅在网页标题或指向此网页的链接中出现。。

   </dd>

</dl>

 

<dl>

   <dt>

           <img src="image.jpg"width="100" height="80"/>

   </dt>

   <dd>

           春华秋实您查询的关键词仅在网页标题或指向此网页的链接中出现。。

   </dd>

</dl>

</body>

zwdsmileface
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 正则表达式
tc_gogo的博客
04-12 2240
正则表达式 正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则，凡是符合规则的字符串，我们就认为它“匹配”了，否则，该字符串就是不合法的。 RegExp声明两种方式： 1. 构造函数 var re = new RegExp();//RegExp是一个对象,和Aarray一样 //但这样没有任何效果,需要将正则表达式的内容作为字符串传递进去 ...
android 字体css样式,css字体设置
weixin_35516624的博客
05-27 2002
css字体设置.selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu }说明：加上中文名“微软雅黑”是为了兼容opera。MicrosoftJhengHei为微软正黑体，STHeiti为华文黑体，MingLiu记得11px下的中文有着不凡的效果。在css中推荐使用中文字体的英文表示...
CSS 网页布局（详解网页的布局构造）
百赢出品，必属精品
04-26 1797
网页布局是将网页内容按照一定的结构和规则进行排版和组织，使得页面具有良好的结构和易读性。它涉及到页面元素的位置、大小、间距等方面的设计。头部区域、菜单导航区域、内容区域、底部区域。了解网格系统的概念和作用，掌握如何设计和实现网格布局，以及如何利用网格系统进行页面排版和元素定位。理解响应式设计的原理和重要性，掌握使用媒体查询、流式布局等技术实现网页在不同设备上的自适应显示。熟悉CSS中的各种布局模型，包括常规文档流、浮动布局、定位布局（相对定位、绝对定位、固定定位）、Flexbox布局和栅格布局等。
html图片css设计工具,前端设计的好东西，CSS工具大集合
weixin_36362326的博客
06-07 378
前端设计的好东西，CSS工具大集合1月 28, 2011评论Sponsor这些CSS工具都是很适合网页设计题使用，已经为大家分好类别，请自行点击导航快速浏览：网格和布局，CSS 优化，CSS 菜单工具，CSS 按钮，CSS 圆角，CSS 框架，CSS Sprites，CSS 排版以及 CSS 表单。网格和布局The 1KB CSS Grid新颖的 CSS 网格工具，可用于简化内容管理系统的页面模板...
常见设计模式二：构造者模式
Sean_css的博客
03-12 2096
常见设计模式二：构造者模式 前言 构造者模式也是属于我们常用的设计的一种，比如我们在使用使用 StringBuilder、Retrofit、OkHttp 等，都使用了构造者模式，所以我认为构造者模式是工程师必须掌握的，不仅有助于我们看懂别人的代码，也有助于我们编写出高质量的代码。 什么是构造者模式 构造者模式又叫生成器模式， 构造者模式是将一个复杂对象构建和它的表示相分离，使得同样的构造过程可以创...
CSS3语法
qq_43785075的博客
12-18 1548
CSS是纯文本格式文件 1.CSS3的语法基础 1.1构造CSS样式规则 1.CSS3的基本语法规则 CSS样式由两部分组成：选择器(selector)和声明块(declaration block)，其中选择器和声明块之间可用空格隔开，声明块被一对大括号括起来，花括号之间可以添加一个或多个声明。 Selector {Declaration1;Declaration2;Declaration3;....;DeclarationN;} 多个声明需要用分号隔开，每个声明由属性和属性值组成，属性是希望设置的样式
web程序设计（３）——使用CSS设计新闻网页
weixin_44164249的博客
01-10 6174
实验要求 1、使用html构造一张新闻网页； 2、使用CSS对新闻网页的内容的样式进行设置： 新闻标题按照“红橙黄绿蓝紫”的方式显示标题； 新闻有主标题和新闻来源信息，主标题与副标题使用不同的字体于不同大小显示； 段落的行高设置为2em,首行缩进； 使用本节课所学的选择符，对新闻段落中某些重要信息使用加黑或是彩色文字显示。 实验目的 熟悉掌握CSS样式的使用 实验内容 打开visual stud...
HTML+CSS登录页面
jakelihua
10-28 4476
HTML,CSS，登录页面，动态背景
【vue3】css原子化
weixin_46590928的博客
11-17 2796
如果将编程语言（c/c++等）的基本思想应用于超文本语言（html/css等），能使后者的开发效率大大提高。什么是css原子化？先让我们把目光转到编程语言的一个基础概念——函数。函数可以增加我们代码的复用性。举一个简单的例子，我们定义一个判断质数的函数isPrime()，一个判断非质数的函数isNotPrime()，再定以一个将数字加入数组的函数push()，这些足够小的函数，我们暂且称他们为原子函数。
HTML，JavaScript，CSS的基本使用，简单广告宣传页面设计实现
qq_63873206的博客
01-22 1375
height设置高度，margin设置边框与页面边界的距离，margin-top,margin-bottom,margin-left，margin-right，分别用于设置边框与页面上、下、左、右的距离。border设置边框，px代表像素点，一个不固定的长度单位，solid代表边框线是实心的，black代表边框线是黑色的。id与className在CSS中实现，用于对字体颜色，形状，粗细，背景颜色，边框等的网页美化设计。id是唯一的，每个元素只能有一个id，每个页面这个id只能出现一次，不可重复使用。
CSS原创设计
11-25
【标题】"CSS原创设计"揭示了这个项目的核心在于利用CSS技术进行界面创新与个性化设计。CSS（Cascading Style Sheets）是网页样式表语言，主要用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。通过...
html+css网页设计源代码
05-27
CSS则负责网页的视觉呈现，如颜色、字体、布局和响应式设计。在HTML+CSS网页设计中，CSS允许我们将样式分离出来，使代码更易于维护。通过类选择器（如`.myClass`）或ID选择器（如`#myID`），我们可以为特定的HTML...
html+css+js网页设计.zip
06-17
布局技术包括流体布局、响应式设计（利用媒体查询`@media`）以及Flexbox和Grid布局系统，它们提供了更灵活的页面构造方式。 3. JavaScript基础与交互性： JavaScript通过事件监听（如`onclick`、`onmouseover`）和...
css构造多啦A梦
06-05
本示例“css构造多啦A梦”就是这样一个实例，它利用CSS的特性来创建出著名的卡通角色——哆啦A梦。这个项目不仅展示了CSS的基本语法，还涉及到了CSS的高级技巧，如定位、盒模型、伪类、渐变、阴影以及自定义字体等。...
div+css设计的旅游网站
12-12
【div+css设计的旅游网站】是一个以网页布局技术为核心，专为初学者设计的实践项目。这个项目采用HTML和CSS这两种基础的Web开发语言，旨在帮助学习者掌握如何运用div元素进行页面结构划分，以及如何通过CSS进行样式...
kechengsheji2021.zip
07-30
kechengsheji2021.zip
1cfa8b474c28bb76433ab12fc99ee5ad.jpeg
最新发布
07-30
1cfa8b474c28bb76433ab12fc99ee5ad.jpeg
TwineCompile571GetItSetup.7z
07-30
JomiTech TwineCompile 是一款集成在 C++Builder IDE 中的插件，旨在通过多种技术显著减少 C++ 编译、构建和生成的时间。以下是 TwineCompile 的一些关键能力和特点： 集成编译优化：TwineCompile 通过多线程、文件缓存和自动后台编译等技术，直接集成到 C++Builder IDE 中，优化编译过程。 编译器封装：它不是 C++ 编译器，而是将 Embarcadero 经典和 CLANG 编译器封装在一个构建系统中，优化文件和项目的构建方式。 IDE 支持：TwineCompile 通过 GetIt 包管理器提供，支持安装它的 IDE。对于旧版 IDE 或没有活跃更新订阅的 IDE，可以购买许可证以获得支持。 版本兼容性：TwineCompile 5.x 支持 C++Builder 10.2 至 C++Builder 12.0，而 TwineCompile 4.x 支持 C++Builder 5 至 C++Builder 10.1。
SCI一区】淘金算法GRO-CNN-BiLSTM-Mutilhead-Attention多变量时序预测含源码 5642.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-BiLSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-BiLSTM-Mutilhead-Attention回归预测
CSS设计指南(第3版)：经典设计师手册
《CSS设计指南(第3版)》是一本经典的IT专业书籍，专为初中级CSS学习者和设计师精心编撰。该书由英国作者Charles Wyke-Smith撰写，李松峰翻译，作为图灵程序设计丛书中的一员，它在人民邮电出版社出版。全书共分为8个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值