244月

CSS图片固定宽高比例显示

前端开发DIV+CSS, 英文网站建设

代码:

HTML: <p class=“image-container”> <img src=“xxx.png”> </p>

CSS:

p.image-container { width: 100%; height: 0; padding-bot[……]

No comments | read more »
214月

CSS 裁剪图片保持长宽比例

前端开发DIV+CSS, 英文网站建设

设置图片的裁剪尺寸在 CSS 里使用这行代码:

这种写法能很好地把大小不合适的图片裁剪为合适尺寸或者圆形的图片。把 object-fit:cover 图片上,并且设置好,图片自己就会进行裁剪和居中。[……]

No comments | read more »
124月

图标与文字排列水平居中对齐

前端开发DIV+CSS, 英文网站建设

center

如上图微信图标和微信登陆文字居中,且图标和文字水平居中对齐

代码外面的div 必须是.div {text-align:center;}

里面的图片.div img { vertical-align: baseline; position: relative; top:6px;}[……]

No comments | read more »
273月

Font Awesome 一套实用的图标字体库和CSS框架

前端开发DIV+CSS, 英文网站建设, 设计开发工具

Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

网站如何引入默认的Font Awesome图标字体 CSS样式

1、从官方网站上http://fontawesome.io/下载图标字体文件包
2、[……]

No comments | read more »
233月

HTML meta viewport属性说明

前端开发DIV+CSS

网页手机wap2.0网页的head里加入下面这条元标签,在手机的浏览器中页面将以原始大小显示,并不允许缩放。
就可以按照原始像素大小来书写页面

什么是Viewport

手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就[……]

No comments | read more »
2012月

WP Mail SMTP插件解决Contact Form 7留言发送失败

WordPress建站, 前端开发DIV+CSS

WP Mail SMTP是一款解决WordPress主机因为不支持或者是禁用了mail()函数,导致无法实现在线邮件收发功能的插件,这里在详细介绍下有关“WP Mail SMTP插件来解决Contact Form 7表单提交失败问题”的具体方法。

1. 设置WP Mail SMTP插件
[……]

No comments | read more »
0910月

@import url语法css导入样式表

WordPress建站, 前端开发DIV+CSS, 英文网站建设

@import这种方式通常会在CSS文件中使用,即是导入样式表。这样做的好处是,把多个样式表导入到一个样式表中,在页面里面只需要导入一个样式表即可。

示例
@import url(“foo.css”) screen, print;
@import “print.css”;
@import[……]

No comments | read more »
0810月

css自适应多终端响应式布局设计

WordPress建站, 前端开发DIV+CSS, 英文网站建设

首先设置允许网页宽度自动调整
在网页代码的头部,加入一行viewport元标签。

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

viewport是网页默认的宽度和高度,上面这行代[……]

No comments | read more »
189月

网站首页加入收藏功能

WordPress建站, 前端开发DIV+CSS, 英文网站建设

加入收藏功能目前只支持ie浏览器,其他浏览器智能给出提示“您使用的浏览器不支持此功能,请使用Ctrl+D进行添加”

代码:

<script type=”text/javascript”>
function AddFavorite()
{
var sURL = ‘http[……]

No comments | read more »
119月

HTML mate标签X-UA-Compatible设置浏览器兼容模式

SEO/网站推广, WordPress建站, 前端开发DIV+CSS, 英文网站建设

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>

meta元素:可提供有关页面的元信息,<meta>标签位于文档的头部,不包含任何内容,<meta> 标签的属性定义了与文档相关联的[……]

No comments | read more »