在 hostinger 上托管我的网站时，CSS 不同
问题描述 投票：0回答：0
我建立我的网站并在本地主机上运行它工作。
当我将它上传到 Hostinger 时，我的日历 CSS 出现问题
可能是什么问题？
我尝试用 css 来改变以找到问题，但没有用 就像我尝试移动按钮但它不动
CSS：
body {
font-family: "Arial";
}
div#calendar {
margin: 0px auto;
padding: 0px;
width: 602px;
}
div#calendar div.box {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 40px;
background-color: #3FA7D6;
}
div#calendar div.header {
line-height: 40px;
vertical-align: middle;
position: absolute;
left: 11px;
top: 0px;
width: 582px;
height: 40px;
text-align: center;
}
div#calendar div.header a.prev, div#calendar div.header a.next {
position: absolute;
top: 0px;
height: 17px;
display: block;
cursor: pointer;
text-decoration: none;
color: #FFF;
}
div#calendar div.header span.title {
color: #FFF;
font-size: 18px;
}
div#calendar div.header a.prev {
left: 0px;
}
div#calendar div.header a.next {
right: 0px;
}
/*******************************Calendar Content Cells*********************************/
div#calendar div.box-content {
border: 1px solid #3FA7D6;
border-top: none;
}
div#calendar ul.label {
float: left;
margin: 0px;
padding: 0px;
margin-top: 5px;
margin-left: 5px;
}
div#calendar ul.label li {
margin: 0px;
padding: 0px;
margin-right: 5px;
float: left;
list-style-type: none;
width: 80px;
height: 40px;
line-height: 40px;
vertical-align: middle;
text-align: center;
color: #000;
font-size: 15px;
background-color: transparent;
}
div#calendar ul.dates {
float: left;
margin: 0px;
padding: 0px;
margin-left: 5px;
margin-bottom: 5px;
}
/** overall width = width+padding-right**/
div#calendar ul.dates li {
margin: 0px;
padding: 0px;
margin-right: 5px;
margin-top: 5px;
line-height: 80px;
vertical-align: middle;
float: left;
list-style-type: none;
width: 80px;
height: 80px;
font-size: 25px;
background-color: #FFF;
color: #000;
text-align: center;
position: relative;
}
:focus {
outline: none;
}
div.clear {
clear: both;
}
li div {
display: flex;
}
li div form {
display: inline;
align-self: center;
margin: 0;
position: absolute;
bottom: 100px;
}
div.open {
background: #04AA6D;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
div.booked {
background: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
line-height: inherit;
}
.submit:hover {
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color:#f6f6f6;
}
.submit:active {
position:relative;
top:1px;
}
@media screen and (max-width: 600px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
日历 html
<?php
class Calendar
{
/**
* Constructor
*/
public function __construct()
{
$this->naviHref = htmlentities($_SERVER['PHP_SELF']);
}
/********************* PROPERTY ********************/
public $cellContent = '';
protected $observers = array();
private $dayLabels = array("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun");
private $currentYear = 0;
private $currentMonth = 0;
private $currentDay = 0;
private $currentDate = null;
private $daysInMonth = 0;
private $sundayFirst = true;
private $naviHref = null;
/********************* PUBLIC **********************/
/* @return void
* @access public
*/
public function attachObserver($type, $observer)
{
$this->observers[$type][] = $observer;
}
/*
*
* @return void
* @access public
*/
public function notifyObserver($type)
{
if (isset($this->observers[$type])) {
foreach ($this->observers[$type] as $observer) {
$observer->update($this);
}
}
}
public function getCurrentDate()
{
return $this->currentDate;
}
/**
* Set week labels' order.
* When it is set to false,
* monday will be listed as the first day.
*
* @param boolean
* @return void
* @author The-Di-Lab <[email protected]>
* @access public
*/
public function setSundayFirst($bool = true)
{
$this->sundayFirst = $bool;
}
/**
* print out the calendar
*
* @param string
* @param string
* @param array
* @return string
* @author The-Di-Lab <[email protected]>
* @access public
*/
public function show($month = null, $year = null, $attributes = false)
{
if (null == $year && isset($_GET['year'])) {
$year = $_GET['year'];
} else if (null == $year) {
$year = date("Y", time());
}
if (null == $month && isset($_GET['month'])) {
$month = $_GET['month'];
} else if (null == $month) {
$month = date("m", time());
}
$this->currentYear = $year;
$this->currentMonth = $month;
$this->daysInMonth = $this->_daysInMonth($month, $year);
$content = '<div id="calendar">' .
'<div class="box">' .
$this->_createNavi() .
'</div>' .
'<div class="box-content">' .
'<ul class="label">' . $this->_createLabels() . '</ul>';
$content .= '<div class="clear"></div>';
$content .= '<ul class="dates">';
for ($i = 0; $i < $this->_weeksInMonth($month, $year); $i++) {
for ($j = 1; $j <= 7; $j++) {
$content .= $this->_showDay($i * 7 + $j, $attributes);
}
}
$content .= '</ul>';
$content .= '<div class="clear"></div>';
$content .= '</div>';
$content .= '</div>';
return $content;
}
/********************* PRIVATE **********************/
/**
* create the li element for ul
*
* @param string
* @param array
* @return string
* @author The-Di-Lab <[email protected]>
* @access private
*/
private function _showDay($cellNumber, $attributes = false)
{
if ($this->currentDay == 0) {
//1 (for Monday) through 7 (for Sunday)
$firstDayOfTheWeek = date('N', strtotime($this->currentYear . '-' . $this->currentMonth . '-01'));
if ($this->sundayFirst) {
if ($firstDayOfTheWeek == 7) {
$firstDayOfTheWeek = 1;
} else {
$firstDayOfTheWeek++;
}
}
if (intval($cellNumber) == intval($firstDayOfTheWeek)) {
$this->currentDay = 1;
}
}
if (($this->currentDay != 0) && ($this->currentDay <= $this->daysInMonth)) {
$this->currentDate = date('Y-m-d', strtotime($this->currentYear . '-' . $this->currentMonth . '-' . ($this->currentDay)));
$cellContent = $this->_createCellContent($attributes);
$this->currentDay++;
} else {
$this->currentDate = null;
$cellContent = null;
}
return '<li id="li-' . $this->currentDate . '" class="' . ($cellNumber % 7 == 1 ? ' start ' : ($cellNumber % 7 == 0 ? ' end ' : ' ')) .
($cellContent == null ? 'mask' : '') . '">' . $cellContent .'</li>';
}
/**
* create navigation
*
* @return string
* @author The-Di-Lab <[email protected]>
* @access private
*/
private function _createNavi()
{
$nextMonth = $this->currentMonth == 12 ? 1 : intval($this->currentMonth) + 1;
$nextYear = $this->currentMonth == 12 ? intval($this->currentYear) + 1 : $this->currentYear;
$preMonth = $this->currentMonth == 1 ? 12 : intval($this->currentMonth) - 1;
$preYear = $this->currentMonth == 1 ? intval($this->currentYear) - 1 : $this->currentYear;
return
'<div class="header">' .
'<a class="prev" href="' . $this->naviHref . '?month=' . sprintf('%02d', $preMonth) . '&year=' . $preYear . '">Prev</a>' .
'<span class="title">' . date('Y M', strtotime($this->currentYear . '-' . $this->currentMonth . '-1')) . '</span>' .
'<a class="next" href="' . $this->naviHref . '?month=' . sprintf("%02d", $nextMonth) . '&year=' . $nextYear . '">Next</a>' .
'</div>';
}
/**
* create calendar week labels
*
* @return string
* @author The-Di-Lab <[email protected]>
* @access private
*/
private function _createLabels()
{
if ($this->sundayFirst) {
$temp = $this->dayLabels[0];
for ($i = 1; $i < sizeof($this->dayLabels); $i++) {
$tmp = $this->dayLabels[$i];
$this->dayLabels[$i] = $temp;
$temp = $tmp;
}
$this->dayLabels[0] = $temp;
}
$content = '';
foreach ($this->dayLabels as $index => $label) {
$content .= '<li class="' . ($label == 6 ? 'end title' : 'start title') . ' title">' . $label . '</li>';
}
return $content;
}
/**
* create content for li element
*
* @param array
* @return string
* @author The-Di-Lab <[email protected]>
* @access private
*/
private function _createCellContent($setting = false)
{
$this->cellContent = '';
$this->cellContent = $this->currentDay;
//observer
$this->notifyObserver('showCell');
return $this->cellContent;
}
/**
* calculate number of weeks in a particular month
*
* @param number
* @param number
* @return number
* @author The-Di-Lab <[email protected]>
* @access private
*/
private function _weeksInMonth($month = null, $year = null)
{
if (null == ($year))
$year = date("Y", time());
if (null == ($month))
$month = date("m", time());
// find number of weeks in this month
$daysInMonths = $this->_daysInMonth($month, $year);
$numOfweeks = ($daysInMonths % 7 == 0 ? 0 : 1) + intval($daysInMonths / 7);
$monthEndingDay = date('N', strtotime($year . '-' . $month . '-' . $daysInMonths));
$monthStartDay = date('N', strtotime($year . '-' . $month . '-01'));
$monthEndingDay == 7 ? $monthEndingDay = 0 : '';
$monthStartDay == 7 ? $monthStartDay = 0 : '';
if ($monthEndingDay < $monthStartDay) {
$numOfweeks++;
}
return $numOfweeks;
}
/**
* calculate number of days in a particular month
*
* @param number
* @param number
* @return number
* @author The-Di-Lab <[email protected]>
* @access private
*/
private function _daysInMonth($month = null, $year = null)
{
if (null == ($year))
$year = date("Y", time());
if (null == ($month))
$month = date("m", time());
return date('t', strtotime($year . '-' . $month . '-01'));
}
}
这里的部分必须移动按钮
.submit:hover {
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color:#f6f6f6;
}
.submit:active {
position:relative;
top:1px;
}
最新问题
- 链接 - React Router Dom 不调用后端
- 在 1 个图表中显示 3 个字段列时出现问题:(
- 如何验证spring kafka生产者是否成功发送消息？
- 如果所选条目不存在，则自动选择另一个表条目[重复]
- List<DataRow>.DefaultIfEmpty() 显示错误
- AWS 对 IPv4 公共地址收费。出路何在？如何使用 IPv6
- 如何更改 auth JS 上 JWT 令牌的签名算法
- 使用python lasio读取LAS文件时出错
- P4 教程/基本 make run ：没有名为“p4”的模块
- 对自签名和以编程方式创建的证书进行故障排除：私钥管理问题
- 如何监控内核执行的系统调用数量？
- 如果所选条目不存在，请选择另一个表条目[重复]
- 位图与 R.drawable
- Java 说这个方法有一个构造函数名称
- pip::没有找到tensorflow-gpu的匹配分布
- 我遇到了一个问题，即在 Windows 中使用 CreateProcess 函数启动时，某些程序的句柄未正确分离
- 您可以仅使用 CSS 来设置活动表单输入标签的样式吗
- 如何更改 auth JS 上 JWT 令牌的登录算法
- 使用 vscode 的 python 扩展时 mypy 速度很慢
- Pyright/mypy：“expr”没有属性“id”
© www.soinside.com 2019 - 2024. All rights reserved.