定义css设备类型-Media Queries-【WebService学习过程记录(二)】...-【css】ie6 中 li 插入图片后下方有空隙 bug

当前位置: 编程技术>WEB前端

本页文章导读:

▪定义css设备类型-Media Queries 移动时代是任何网页设计师和开发者不可忽略的一个时代，现在我设计的页面有时会在电脑大屏幕上或者移动小屏幕上显示。如何让同一个网站同时适应完全不同尺寸的屏幕，CSS3完美地解决.........

▪【WebService学习过程记录(二)】Java6+Servlet+tomcat发布HelloWord 学习网址：Java6 WebService的发布； java 调用webservice的各种方法总结模仿实例，遇见问题记录 1、eclipse建立Dynamic Web Project项目 2、编写webService服务 package lavasoft.se.........

▪【css】ie6 中 li 插入图片后下方有空隙 bug ie6 中 li 插入图片后下方有空隙 bug，这是 ie6 的有一个经典 bug。解决该 bug 有很多方法，今天我整理了下，共4种方法，给大家分享下。首先附上代码：<!DOCTYPE HTML><html lang="en-US"><head.........

[1]定义css设备类型-Media Queries

来源: 互联网发布时间: 2013-10-22

移动时代是任何网页设计师和开发者不可忽略的一个时代，现在我设计的页面有时会在电脑大屏幕上或者移动小屏幕上显示。如何让同一个网站同时适应完全不同尺寸的屏幕，CSS3完美地解决了这些问题。在CSS2.1版本时候，我们曾经为网站设计不同的CSS样式文件，如打印样式表文件，手机样式文件，电脑样式文件等等，css3提出的Media Queries 解决了这些问题。

CSS3的Media Queries 可以帮助设计师获取以下数据：

1. 浏览器的窗口的宽度和高度，

2.设备的宽和高；

3. 设备的手持方面，横向还是竖向；

4. 分辨率；

到目前为止，Media Queries 模块得到了Firefox浏览器、Safari浏览器、Chrome浏览器以及Opera浏览器的支持。

Media Queries的使用方法：

@media 设备类型 and (设备特性){ 样式代码}

在代码的开头必须要写"@media",然后制定设备类型。css中定义了

Media Types
媒体类型 CSS Version
版本 Compatibility
兼容性 Description
简介 all CSS2 所有浏览器用于所有媒体设备类型 aural CSS2 Opera 用于语音和音乐合成器 braille CSS2 Opera 用于触觉反馈设备 handheld CSS2 Chrome,Safari,Opera 用于小型或手持设备 print CSS2 所有浏览器用于打印机 projection CSS2 Opera 用于投影图像，如幻灯片 screen CSS2 所有浏览器用于计算机显示器 tty CSS2 Opera 用于使用固定间距字符格的设备。如电传打字机和终端 tv CSS2 Opera 用于电视类设备 embossed CSS2 Opera 用于凸点字符（盲文）印刷设备

设备特性的书写放手与样式的书写方式很相似，分为两个部分，当中有冒号分割，冒号前书写设备的某种特性，冒号后书写该特性的具体值

对于这13种设备特性的说明如下表：特性可指定的值是否允许使用min/max前缀特性说明 width 带单位的长度数值允许浏览器窗口的宽度 height 带单位的长度数值允许浏览器窗口的高度 device-width 带单位的长度数值允许设备屏幕分辨率的宽度值 device-height 带单位的长度数值允许设备屏幕分辨率的高度值 orientation 只能指定两个值:portrait或landscape 不允许浏览器窗口的方向是纵向还是横向，当窗口的高度值大于等于高度值时，该特性值为portrait， aspect-ratio 比例值，例如：16/9 允许浏览器窗口的纵横比，比例值为浏览器窗口的宽度值/高度值 device-aspect-ratio 比例值，例如：16/9 允许设备屏幕分辨率的纵横比，比例值为设备屏幕分辨率的宽度值/高度值 color 整数值允许设备使用多少位的颜色值，如果不是彩色设备，该值为0 color-index 整数值允许色彩表中的色彩数 monochrome 整数值允许单色帧缓冲器中每像素的字节数 resolution 分辨率值，譬如300dpi 允许设备的分辨率 scan 只能指定两个值：progressive或interlace 不允许电视机类型设备的扫描方式，progressive表示逐行扫描，interlace表示隔行扫描 grid 只能指定两个值:0或1 不允许设备是基于栅格还是基于位图。基于栅格时该值为1，否则该值为0

使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式，例如：

@media screen and(max-width:639px;)

设备特性的指定值接受min/max的前缀，用来表示大于或者小于等于的逻辑，以此避免使用< 或者 >这些字符。

作者：yilanyoumeng3 发表于2013-1-10 15:00:50 原文链接

阅读：0 评论：0 查看评论

[2]【WebService学习过程记录(二)】Java6+Servlet+tomcat发布HelloWord

来源: 互联网发布时间: 2013-10-22

学习网址：Java6 WebService的发布； java 调用webservice的各种方法总结

模仿实例，遇见问题记录

1、eclipse建立Dynamic Web Project项目

2、编写webService服务

package lavasoft.server;

import javax.jws.WebService;
/**
* Java开发的WebService服务端
*/
@WebService
public class JavaWebService {
        /**
         * Web服务中的业务方法
         * @return 一个字符串
         */
        public String doSomething(String username) {
                return username + " hello!";
        }
        public String doHello() {
                return "XFire hello!";
       }
 }

3、开发发布服务的Servlet，为了通用性，最好选择GenericServlet来继承

package lavasoft.servlet;

import lavasoft.server.JavaWebService;
import javax.servlet.*;
import javax.xml.ws.Endpoint;
import java.io.IOException;

/**
* 发布Java WebService的Servlet
*/
public class WSServlet extends GenericServlet {
	private static final long serialVersionUID = 1L;
		@Override
        public void init(ServletConfig servletConfig) throws ServletException {
                super.init(servletConfig);
                System.out.println("准备启动WebService服务");
                //发布一个WebService
                Endpoint.publish("http://localhost:8888/javaws/JavaWebService", new JavaWebService());
                System.out.println("已成功启动WebService服务");
        }
        public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
                System.out.println("此Servlet不处理任何业务逻辑，仅仅用来发布一个Web服务");
        }
}

4、配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
                 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
        http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
                 version="2.5">
        <welcome-file-list>
                <welcome-file>index.jsp</welcome-file>
        </welcome-file-list>
        <servlet>
                <servlet-name>WSServlet</servlet-name>
                <servlet-class>lavasoft.servlet.WSServlet</servlet-class>
                <load-on-startup>1</load-on-startup>
        </servlet>
        <servlet-mapping>
                <servlet-name>WSServlet</servlet-name>
                <url-pattern>/servlet/WSServlet</url-pattern>
        </servlet-mapping>
</web-app>

注意：<load-on-startup>1</load-on-startup>，这样写的目的是Servlet能伴随容器的启动在第一时间加载。以便服务能尽可能早的发布，否则，只有在第一次请求该Servlet的时候，才会被加载到容器。
web.xml配置与java文件所在包要一致
5、初始页index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>展示</title>
    </head>
    <body>
        <div>
	    <h1>这是一个测试java WebService发布服务的例子</h1>
	    <a href=/blog_article/"http_/localhost_8888/javaws/JavaWebService">点此处访问WSDL</a>/index.html
        </div>
    </body>
</html>

6、启动Tocmat

浏览器中输入：http://localhost/JavaWebService/ 成功访问即可

（我的tomcat没有端口）

7、客户端调用

建立一个简单的空项目，一个类

import java.net.URL;
import org.codehaus.xfire.client.Client;

public class XFireTest {

	public static void main(String[] args) {
		try {
			Client c = new Client(new URL(
					"http://localhost:8888/javaws/JavaWebService?wsdl"));
			Object[] results = c.invoke("doHello", new Object[0]);
			System.out.println(results.length);
			for (Object one : results) {
				System.out.println("1 结果是：" + one);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

运行看是否可以成功访问？成功即可

问题：

访问时的传参我还有点问题，没有运行成功

作者：xuexin8625 发表于2013-1-10 14:58:51 原文链接

阅读：10 评论：0 查看评论

[3]【css】ie6 中 li 插入图片后下方有空隙 bug

来源: 发布时间: 2013-10-22

ie6 中 li 插入图片后下方有空隙 bug，这是 ie6 的有一个经典 bug。解决该 bug 有很多方法，今天我整理了下，共4种方法，给大家分享下。

首先附上代码：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="/blog_article/css/base.css" media="all"/>
<style type="text/css">
ul{width:774px;overflow:hidden;margin-left:auto;margin-right:auto;}
li{float:left;width:248px;height:162px;display:inline;margin:0 10px 10px 0;background:red;}
</style>
</head>
<body>
<ul>
<li><img src="/blog_article/images/cat.jpg" width="248" height="162" alt=""/></li>
<li><img src="/blog_article/images/cat.jpg" width="248" height="162" alt=""/></li>
<li><img src="/blog_article/images/cat.jpg" width="248" height="162" alt=""/></li>
<li><img src="/blog_article/images/cat.jpg" width="248" height="162" alt=""/></li>
<li><img src="/blog_article/images/cat.jpg" width="248" height="162" alt=""/></li>
<li><img src="/blog_article/images/cat.jpg" width="248" height="162" alt=""/></li>
</ul>
</body>
</html>

效果如下：