总结了一些基本内容，不多不少，够用就好

最新推荐文章于 2024-09-01 21:50:19 发布

小甘帝

最新推荐文章于 2024-09-01 21:50:19 发布

阅读量545

点赞数 3

分类专栏：笔记文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_52359647/article/details/115443115

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

知识的零散收集，和自我学习的巩固与加深
一，标签div-文本框属性
二，标签div-文字属性
三，其他
四，小结

知识的零散收集，和自我学习的巩固与加深

一，标签div-文本框属性

文本框边框的宽度

border-width: 0px;

文本框颜色

border-colos:  ;

文本框填充颜色(div背景颜色)

background-color:  ;

文本框边框的样式

邮票式穿孔样式-圆角

border-style:dotted;

双边框

border-style:double;

齿轮式样式-方角

border-style:dashed;

内嵌-自带阴影

border-style:groove;
border-style:ridge;
border-style:inset;
border-style:outset;

直线

border-style:solid;

无样式

border-style:none;

二，标签div-文字属性

文字颜色

color: #FFFFFF;

字体粗细

font-weight: ;

文字大小

font-size:  ;

文字的对齐方式

text-align: ;

首行缩进

text-indent: ;

字间距

word-spacing: ;

三，其他

显示与隐藏

display:block;
display:none;

向上填充向左填充向右填充

padding-top:  px;
padding-left: px;
padding-right: px;

//注意，在填充位置的时候，高度和宽度要对应减去；不然会有溢出。

居中位置

margin: auto;

相对于父类距上左右

margin-top: px;
margin-left: px;
margin-right: px;

常用调用

<script language="javascript">
//创建一个函数为my
   function my()
   {
     //让id=" "的样式为。。。。
     document.getElementById(" ").style.
   }
   function my1()
   {
   }
   function my2()
   {
   }
   function my3()
   {
   }
</script>
//加载时调用函数my()
<body onLoad="my()">
//点击时调用函数my1()、悬浮进入调用函数my2() 离开调用函数my3() 
<div onClick="my1()" onmousemove="my3()" onmouseout="my4()">
</div>
</boby>

id 唯一
class可以多个

有时为了使布局清晰，更加规范同下：

<style type="text/css">
  .wz
  {
  //在这里写样式
  }
</style>
<body>
<div class="wz">
</div>
</boby>

是不是比(如下图)好看多了

<body>
<div class="wz" style="                         ">
</div>
</boby>

或者直接在外部建立style包通过导入来实现

悬浮的另外一种方法
靠CSS来实现

<style type="text/css">
  .wz,.zw
  {
  //相同样式
  }
  .wz
  {
  //不同样式
  }
   .zw
  {
  //不同样式
  }
</style>
<body>
<div class="wz" onmousemove="this.className='zw'" onmouseout="this.className='wz'">
</div>
</boby>

这里有一个问题：当同时调用JS和CSS，好像CSS会被JS覆盖，
请问有什么可以解决的吗？

四，小结

在制作网页时，文本框的边框样式默认为none，同时灵活运用border-style和border-width的组合应用，不然可能会出现奇奇怪怪的形状。

若有问题，还请告知。
目前学习中，一起加油。

<诸序＋2>

小甘帝

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
3
评论
总结了一些基本内容，不多不少，够用就好

文章目录知识的零散收集，和自我学习的巩固与加深一，标签div-文本框属性二，标签div-文字属性三，其他四，小结知识的零散收集，和自我学习的巩固与加深一，标签div-文本框属性文本框边框的宽度border-width: 0px;文本框颜色border-colos: ;文本框填充颜色(div背景颜色)background-color: ;文本框边框的样式邮票式穿孔样式-圆角border-style:dotted;双边框border-style:double;齿轮
复制链接

扫一扫