重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
特殊字体一般不是说不能添加,而是考虑到用户电脑上预装的字体有限,所以局限在宋体和微软雅黑两种字体,css属性中有个font属性,例如{font-family:"迷你简菱心";},在装过这个字体的的电脑会有效果,但是再没有装过的电脑可能就是其它字体了,一般会解析为宋体,问题解决一般由两种解决方案。
成都创新互联网站建设公司一直秉承“诚信做人,踏实做事”的原则,不欺瞒客户,是我们最起码的底线! 以服务为基础,以质量求生存,以技术求发展,成交一个客户多一个朋友!专注中小微企业官网定制,成都做网站、成都网站建设、成都外贸网站建设,塑造企业网络形象打造互联网企业效应。
第一:css3下载字体,代码如下
@font-face
{
font-family:
'自己命名字体名字';
src:
url('字体路径');
src:
url('FileName.eot?#iefix')
format('embedded-opentype'),
/*其它格式*/
url('FileName.woff')
format('woff'),
url('FileName.ttf')
format('truetype'),
url('FileName.svg#FontName')
format('svg');
font-style:
normal;
font-weight:
normal;
/*设置默认样式*/
}
.aa{font-family:"自己命名字体名字";}
不兼容ie8及以下浏览器
第二:切png图片
纯静态网页。代码与样式分开。易于被搜索引擎收录。
一、准备工作
进入到 /home/shiyanlou/ 目录下,新建空白文档:
命名为 Baymax.html (其它名字也可以,但后缀名必须是 .html):
使用 gedit 打开,准备编辑代码:
二、编写 HTML
填写以下代码:
!doctype html
html
headmeta charset="utf-8"titleBaymax/title/head
body
div id="baymax"
!-- 定义头部,包括两个眼睛、嘴 --
div id="head"
div id="eye"/div
div id="eye2"/div
div id="mouth"/div
/div
!-- 定义躯干,包括心脏 --
div id="torso"
div id="heart"/div
/div
!-- 定义肚子腹部,包括 cover(和躯干的连接处) --
div id="belly"
div id="cover"/div
/div
!-- 定义左臂,包括一大一小两个手指 --
div id="left-arm"
div id="l-bigfinger"/div
div id="l-smallfinger"/div
/div
!-- 定义右臂,同样包括一大一小两个手指 --
div id="right-arm"
div id="r-bigfinger"/div
div id="r-smallfinger"/div
/div
!-- 定义左腿 --
div id="left-leg"/div
!-- 定义右腿 --
div id="right-leg"/div
/div
/body
html
三、添加 CSS 样式
我们已经使用 HTML 定义好「大白」的各个元素,现在就需要利用到 CSS 来绘制它的样式外表。
由于「大白」是白色的,为了更容易辨识,我们把背景设为深色。
然后首先是头部:
body {
background: #595959;
}
#baymax{
/*设置为 居中*/
margin: 0 auto;
/*高度*/
height: 600px;
/*隐藏溢出*/
overflow: hidden;
}
#head{
height: 64px;
width: 100px;
/*以百分比定义圆角的形状*/
border-radius: 50%;
/*背景*/
background: #fff;
margin: 0 auto;
margin-bottom: -20px;
/*设置下边框的样式*/
border-bottom: 5px solid #e0e0e0;
/*属性设置元素的堆叠顺序; 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
z-index: 100;
/*生成相对定位的元素*/
position: relative;
}
效果预览:
赶紧再来添加眼睛和嘴吧!
#eye,
#eye2{
width: 11px;
height: 13px;
background: #282828;
border-radius: 50%;
position: relative;
top: 30px;
left: 27px;
/*旋转该元素*/
transform: rotate(8deg);
}
#eye2{
/*使其旋转对称*/
transform: rotate(-8deg);
left: 69px; top: 17px;
}
#mouth{
width: 38px;
height: 1.5px;
background: #282828;
position: relative;
left: 34px;
top: 10px;
}
首先你要非常熟悉css样式的相关属性,比如一些特效(过渡,动画,阴影等),其次就是有比较好的色彩搭配能力,再次就是有个美观的设计稿
就是隐藏
display:none
当前显示的设置为display:block
一般使用脚本实现
比如你要隐藏的元素为div id="info1"/div
要显示的元素为div id="info2"/div
假设使用jquery控制
代码为以下两句:
$("#info1").hide();
$("#info2").show();