HTML几个特殊的属性标签的使用介绍_HTML/Xhtml_网页制作
以下几项属性对于浏览器的兼容很不好 1transform:rotate(45deg) 2border-top-left-radius 该属性允许您向元素添加圆角边框 3border-radius 该属性允许您向元素添加圆角边框 4box-shadow 属性向框添加一个或多个阴影 5text-shadow 属性向文本设置阴影 6transition 为了更好的兼容各个浏览器,需要加上前缀 -o- /Opera浏览器/ -webkit- /Webkit内核浏览器 Safari and chrome/ -ms- /IE 9/ -moz- /Firefox浏览器/ 1transform:rotate(45deg) 通过transform属性使对象旋转,其中(45deg)是旋转的角度 transform:rotate(45deg); -ms-transform:rotate(45deg); /IE 9/ -o-transform:rotate(45deg); /Opera浏览器/ -webkit-transform:rotate(45deg); /Webkit内核浏览器 Safari and chrome/ -moz-transform:rotate(45deg); /Firefox浏览器/ 2border-top-left-radius border-radius 该属性允许您向元素添加圆角边框 前者可以选择添加圆角边框的位置 border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius border-top-left-radius 该属性允许您向元素添加圆角边框,与border-radius一样,只是可以控制需要添加圆角边框的位置 3box-shadow属性向框添加一个或多个阴影,text-shadow属性向文本设置阴影 box-shadow: h-shadow || v-shadow || blur || spread || color || inset; 属性:水平阴影的位置 || 垂直阴影的位置 || 模糊距离 || 阴影尺寸 || 阴影颜色 || 将外部阴影(outset)改为内部阴影 box-shadow:1px 1px 3px #292929; text-shadow: h-shadow || v-shadow || blur || color; text-shadow: 0px -1px 0px #000; 4transition property || duration || timing-function || delay 规定设置过渡效果的 CSS 属性的名称 || 规定完成过渡效果需要多少秒或毫秒 || 规定速度效果的速度曲线 || 定义过渡效果何时开始 目前所有浏览器都不支持 transition 属性。 ease 默认。动画以低速开始，然后加快，在结束前变慢 ease-in 动画以低速开始 ease-out 动画以低速结束 ease-in-out 动画以低速开始和结束 transition:background 5s ease; ONE EG:
代码如下: div { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; / Firefox 4 / -webkit-transition:width 2s; / Safari and Chrome / -o-transition:width 2s; / Opera / } div:hover { width:300px; }请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。
注释：本例在 Internet Explorer 中无效。
TWO EG:
代码如下: div { width:100px; height:100px; background:blue; transition-property:background; transition-duration:5s; / Firefox 4 / -moz-transition-property:background; -moz-transition-duration:5s; / Safari and Chrome -webkit-transition-property:background; -webkit-transition-duration:5s;/ transition:background 5s ease; / Opera / -o-transition-property:background; -o-transition-duration:5s; } div:hover { background:red; }请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。
注释：本例在 Internet Explorer 中无效。
效果图，自己换，
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>泰国</title>
<link rel="stylesheet" type="text/css" href="css/indexcss"/>
<script type="text/javascript" src="js/indexjs"></script>
</head>
<body>
<div class="box">
<div class="titles">泰国</div>
<div class="img-box">
<img class="auto-img" src="images/a001jpg"/>
</div>
<div class="text-box">
<div class="text-box-a">
<a href="#">曼谷、芭提雅(珊瑚岛、金沙岛)5晚7天</a>
</div>
<div class="text-box-a">
东航直飞曼谷客机，入住1晚曼谷国际5星+4晚泰式5星酒店,芭提雅双岛(珊瑚岛+金沙岛)清
</div>
<div class="text-box-a">
出发日期：星期一,星期二,星期三,星期四,星期五
</div>
</div>
<div class="bottom ovf">
<div class="fl text-a1">
班期：每周发团
</div>
<div class="fr">
<div class="price">￥ 4549</div>
<div class="rush-to-buy">立即抢购</div>
</div>
</div>
</div>
</body>
</html>
css样式：
html,body{
padding:0;
margin:20px 0 0;
}
a{
text-decoration:none;
}
fl{
float:left;
}
fr{
float:right;
}
ovf{
overflow: hidden;
}
box{
width:50%;
margin:0 auto;
border:1px dashed #000000;
padding:4px;
}
titles{
width:100%;
text-align: center;
color:#ffffff;
background-color: #ff0000;
}
img-box{
width:100%;
margin-top: 4px;
}
auto-img{
display: block;
width:100%;
}
text-box{
width:100%;
}
text-box-a{
width:100%;
font-size: 14px;
line-height: 20px;
letter-spacing: 1px;
}
text-box-a>a{
color:#0089ff;
}
bottom{
margin-top: 30px;
}
text-a1{
font-size: 18px;
font-style: italic;
font-style:oblique;/为保证斜体效果加一个/
}
price{
font-size: 16px;
color:#8B3E2F;
}
rush-to-buy{
width:80px;
text-align: center;
background-color: #ff0000;
font-size: 16px;
}
1自然布局。
没有任何修饰的布局是自动靠左的。
2流动布局
上面讲的float:left的情况。
3定位布局
相对定位和绝对定位都是相对于父div标签的。
相对------以这个元素的本来应该在的位置为参照点
绝对——以父div标签的原点（左上角）为参照点。
由于外层是position:relative，所以里层是absolute的话，则会以外层的左上角为位移参考对齐。当然外层只写position:relative，写上left,top这两个值，则表示以：以这个元素的本来应该在的位置为布局参照原点进行left,top对齐。
还有一种情况是，只是一个position:absolute;外层没有position:relative，这时会找寻那个点为参考呢？这时候的原则是：如果某父级元素中有relative者，则以某父级元素为参考原点，如果没有position:relative，则以body为参考原点。如果position:absolute外层没有relative时，这两个布局上是没有区别的。
当然最后一种情况是：外层是：position:absolute;里边是position:relative，那会是什么情况？按着原来的原则，absolute会参考body为布局原点，relative会参考他本来应该在的位置为布局原点，这时候其实就是参考外层左上角为布局原点。
创建你自己的HTML文件怎样自己制作网页？有几种方法来创建HTML文档
首先，你可以输入HTML代码指令和内容，用一个文本编辑程序
简单的文本编辑器中包含的所有MicrosoftWindows操作系统（写字板和记事本），并在Mac上（的SimpleText）
这些基本上都是您的电脑已经剥离下来的文字处理器
您也可以使用HTML编辑器，如MicrosoftSharePointDesigner中
这些应用程序让用户只需简单地点击他的方式来完成网页
我们将使用第一种方法，原始的HTML代码
我们也可以通过手工编码的HTML，因为：1）它会帮助你更好地理解网页的工作原理;2）你会知道如何编辑网页，不管它们是如何创建和3）一些浏览器可能不承认所有的应用程序可能会增加一个网页的功能
考虑你的网页目的如果你有一个企业想要推广网上，你会希望让游客知道你是谁，你做什么，他们如何能得到与您联系
如果你是一个球迷或业余爱好者，你的页面可以展示您的利益，提供信息同好，一起的，也许一组，这将导致相关网站的链接
另外，有没有错，创建一个页面来展示自己
想想什么样的图像，应该出现在你的网页里，虽然互联网很流行，请记住，为用户提供更原始的连接，大的图像需要更长的时间来下载
这种担忧变得更大，在处理多媒体，如视频和音频片段，这需要更大的文件
确定你想要的信息有多少，包括在页面上
如果你的页面是短暂的，读者一般不会有问题，向下滚动到阅读的内容
不过，在理想情况下，应该是一个游客能获得最有用的信息
如果页面上有大量的信息，你可能会考虑两种选择
就是要打破这个信息到单独的网页，并从您的主页提供链接到这些网页，在页面顶部提供链接到页面上的信息后，你可以创建一个表的内容
添加和一些链接现在，你将图像添加到您的HTML页面里
将图像从网页到自己的文档，你首先必须将它保存到自己的目录
尝试了这一点，我们必须先拿出您在您的网站上使用的图像
看一台计算机上的谷歌和使用它的这个测试运行
你会想，以确保您的图像文件的标题是你可以记住
变更后的“另存为”，将其保存为“happycomputer
gif
”如果必要的话，将图像保存到目录中
您的HTML文件相同的目录中现在存储在称为“happycomputer
gif”的图像文件，你会加入这一行到您的文档将浏览器指向此文件（图像源）：<imgSRC="happycomputer
gif">浏览器中的页面加载时，图像会出现在页面上的地方，你所要求的
请记住：当你使用你在网络上找到的文本或图像，你必须始终遵循的指导方针，来自该网站的创建者
如果没有指引发布，你必须的创建者联系，并要求允许使用的材料
进入网络空间，上传你的文件由于上传过程会有所不同，这取决于你使用什么样的应用和服务提供商的要求，我们将介绍这个过程中，一般只是简单地
被称为FTP上传文件的标准方法，或“文件传输协议”
这意味着：从您的电脑传输文件到另一台服务器的方法
我们将使用FTP作为一个例子，因为这是标准的应用程序，从Windows系统上传文件
如果你没有FTP，您可以从许多共享网站免费下载
首先，您要确保您的所有文件上传在一个共同的文件夹或目录
您必须确定您的服务提供商的政策，在何处以及如何将您的文件上传到其服务器上，以及是否必须与一个特定的标签或格式保存文件
查看您的文档和他们的网站
如果你不能找到所需的信息，或者如果它是不清楚，请致电他们，要求他们很好地解释给你听
您必须先登录为你服务，你通常做的就是上网
然后运行FTP
这将打开一个窗口的会话配置文件
如果没有，点击“连接”按钮，弹出正确的窗口
一个新的会话，点击“新建”，然后填写在配置文件名称
输入主机名，您要输入您的服务提供商的服务器的名称（他们会为您提供此信息）
既然我们已经救了我们在桌面上的目录，在Windows中正确的路径将是：C：WINDOWS桌面目录名当你填写完这些行中，单击“保存”-你需要稍后再使用此连接
然后点击“OK”，开始上传文件的目录
你现在应该寻找一个窗口的顶部的应用程序的名称，然后上传到你的服务器的名称
在左侧的窗口，在“本地系统”，你应该寻找在某一行包含在您的计算机上的目录的名称，和下面这一行上市的该目录中的文件
在右侧的窗口，那句“远程系统”，应是一个包含的目录的名称，表示你的服务器上的空间，在这个目录的名字最终可能会在您的用户名，方便识别
下面这行，将是一个空的空间，我们的东西一些文件
点击你要传送的文件，在左侧的窗口
如果你按住鼠标按钮，你可以一次选择多个文件
一旦他们选定后，点击箭头按钮，在窗口的中心-一个指向正确的-因为这是我们的方向传输文件
一个面板打开每个文件被发送之前，询问您是否要更改文件名
如果没有，点击“OK”的每个文件，它会在它的途中
1、可以利用电脑中的Word文档完成家谱制作，首先打开word文档，点击工具栏中的“插入”选项并找到“smartart”图标。
2、然后在打开的“smartart”页面选择“组织结构图”，点击确定。
3、即可将标准的组织结构图插入页面中，点击文本处即可输入文字。
4、点击空白处或者原本的文本框，并选择添加项目的按钮，选择需要添加的项目的位置。
5、根据需要进行添加后即可生成一个家谱世系图的样式，在其中输入对应的姓名及内容即可。
HTML几个特殊的属性标签的使用介绍_HTML/Xhtml_网页制作
本文2023-10-12 09:42:12发表“资讯”栏目。
本文链接：https://www.lezaizhuan.com/article/235112.html
相关文章
