使用css3制作导航及画圆及椭圆边框的实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html;
charset=utf-8" /> <title>无标题文档</title>  <style>
 *{ margin:0px; padding:0px;}  .serch_left{ border-radius:20px;}
    .serch ,.serch_left,.serch_right{ height:40px; }
     .serch { width:500px; border:#000 0px solid;
background:#09F; margin:50px;   border-radius:20px;}  .serch_left {
width:390px; height:36px; border:#09F 2px solid; background:#FFF;}
 .serch_right{ width:90px;}  .serch_left,.serch_right{ 
float:left; text-align:center;}  .serch_right{height:30px;
padding-top:10px; color:#FFF; font-weight:bold; cursor:pointer;}
     .inp_serch{ width:390px; padding-left:30px;
background:url(img/serch.png) no-repeat 5px 5px; height:35px; border:0px;
border-radius:20px; border-color:#FFF;   font-size:20px;}
 </style>

<script src="js/jquery-1.8.3.min.js"></script>
   <script >       $(function(){  
    $(".inp_serch").css("color","#CCC").focus(function(){
          /*val() 能取得值  还可以 赋值*/
     if($(this).val()==""){      
$(this).val("搜索");       }     
          }).blur(function(){
            
if($(this).val()=="搜索"){       
$(this).css("color","#CCC");      }else{
        $(this).css("color","black");
      }      
      });    
 $(".serch_right").click(function(){        
alert($(".inp_serch").val());      });    
   });       </script>

<style>       .yuan{ width:20px; height:20px;
border-radius:20px; background-color:#F00;    color:#FFF;
font-weight:bold; text-align:center; margin:5px; float:10px;}

.cl{ width:200px; height:40px; border-top-left-radius:10px;
border-bottom-right-radius:10px; border:#00F 2px solid;} </style>

</head>

<body>

<div class="yuan">1</div>   <div
class="yuan">2</div>   <div class="yuan">3</div>
  <div class="yuan">4</div>       <div
class="cl"></div>        <div class="serch">
      <div class="serch_left">
        <input  type="text"
class="inp_serch"/>      
      </div>      
<div class="serch_right">搜索</div>   </div>

</body> </html>

时间: 2024-11-09 00:49:12

使用css3制作导航及画圆及椭圆边框的实现的相关文章

css3制作导航栏

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS制作立体导航</title>    <link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">    &l

使用CSS3制作导航条和毛玻璃效果

导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题:通过CSS3来制作类似下面的导航条和毛玻璃效果. 导航条是梯形形状的. 背景区域的毛玻璃效果. 把导航条和毛玻璃效果在一篇文章中分享其实是有原因的.因为这两个效果的实现离不开一个重要的思想. 用语言来描述就是:父元素设置position:relative,其伪元素(after或者before)设置

扫描转换算法——DDA、中点画线画圆、椭圆

我的理解:在光栅图形学中,由于每一个点的表示都只能是整数值,所以光栅图形学实际只是对对实际图形的近似表示. 数值微分法(DDA):以下PPT截图来自北京化工大学李辉老师 代码实现: import matplotlib.pyplot as plt import matplotlib.patches as patches from pylab import * def init(ax): #将主标签设置为1的倍数 majorLocator = MultipleLocator(1); #设置主刻度标签

【CSS笔记】css3制作立体导航

此例设计到:css3,伪类等. 源码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3制作立体导航</title> <link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css&q

图解CSS3制作圆环形进度条的实例教程

圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了: .circleprogress{        width: 160px;        height: 160px;        border:20px solid red;        border-radius: 50

css3制作立体导航菜单

1.效果图如下: 2.css实现 下面代码中红色和绿色是两种实现方法,选一即可. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS制作立体导航</title> <link rel="stylesheet" href="http://www.w3cplus.com/

CSS3背景 制作导航菜单综合练习题

CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用box-shadow实现立体风格 3.制作导航分隔线 提示:使用渐变与伪元素制作 4.删除第一个和最后一个导航分隔线 提示:使用伪元素删除第一个和最后一个分隔线 <!doctype html> <html lang="en"> <head> <me

使用 jQuery 和 CSS3 制作滑动导航菜单

这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQuery 图片轮播插件 本文

swiper 、css3制作移动端网站,折叠导航

swiper .css3制作移动端网站,折叠导航 前几天公司要更新改版移动端的官网,由于网站本身没有多少内容,所以设计师就做成了整屏滑动的样子,起初我并没有看设计稿就一口答应了,拿到手后发现了几个问题让我不知道选用fullpage还是选择swiper来写这个项目.下图就是这个项目完成的效果. 问题1:整屏滑动两个插件都可以用,但是移动端用swiper偏多的 问题2:网站的导航要随着页面更新跳转 这里fullage还是很实用的 问题3:我想用swiper却不是很熟悉swiper怎么制作导航(平时不